This is the 16th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Today to talk about JS how to control the browser prompt content, I believe a lot of friends have seen such a scene, the editor of the article is not saved when click exit or refresh, the browser will jump out prompt “the current page is not saved”. So how does this effect work? It’s not that complicated, it’s basically just a browser API.

Train of thought

If the browser prompts according to JS events ==> Display the prompt content.

JS event

window.onbeforeunload

The window.onbeforeUnload event is triggered when leaving the current page (refreshed or closed).

Window.onbeforeunload events are useful for a wide range of purposes, especially for data dump points, such as GA page access statistics, monitoring whether the page window is interrupted, user access, etc. I have previously written an article “Understand the Series after reading” to talk about the principle and implementation of data burying principle to make a certain description of the data burying principle, in which user Time On Site (Time On Site) business burying can be implemented using the Window.onbeforeUnload event.

Again, we can use this event to pop up a dialog that prompts the user to continue browsing the page or leave the current page.

It’s worth noting that the default message varies from browser to browser, but the standard message is something like “Are you sure you want to leave this page?” And the information cannot be deleted. But we can also use returnValue to define some message prompt to be displayed in the dialog box along with the standard information. In addition, some browsers, such as Firefox, do not support custom message prompts and can only display standard messages.

Code implementation

The idea has, JS event also has, the following is the code implementation.

    window.onbeforeunload = function (e) {
        e = e || window.event
        if (e) {
            e.returnValue = 'The site may not save your changes.'
        }
        return 'The site may not save your changes.'
    }
    
    // Manually call: window.confirm(' the system may not save your changes ')
Copy the code

Address jump effect diagram:

Refresh the page renderings

Close the page renderings

Close the browser renderings

It can be seen that the customized message prompt does not take effect, because some browsers do not open the returnValue customized message prompt for security reasons, so as to avoid the prompt given by the website to the user being mistaken as the browser prompt.

Afterword.

Today is my insistence day more of the sixteenth day, in these sixteen days, perhaps write the blog is relatively simple basis, but each article is that day a word to knock out, subject matter is also that day to think, not save draft, also have no ideas, more is to force yourself to do this thing. If you don’t spend a few hours each day doing daily chores, what do you do with those hours? Maybe you just swipe your phone and read the news. Come on, choose to knock yourself, maybe there will be different scenery on the road.

PS: today is the 16th day of my Denver nuggets challenge, more than half a month! Where there is a will, there is a way. Come on, everybody

The list of articles with further challenges is as follows:

  • Flex layout container elements and project elements attributes

  • 2021.06.02 how to play with CSS Gradient Background

  • How to Use SVG to create Text Effects along Arbitrary Paths

  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”

  • Git Commit Specification for team management: How many people don’t write commit records?

  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”

  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”

  • On Prototypes and Prototype Chains in 11 Aspects

  • A Closer Look at JavaScript scope and Scope Chains

  • What is a closure in JavaScript?

  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects

  • Apply a free API and use native JS to create typewriter-like vertical lines of text

  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes

  • 2021.06.14 “Native JS implementation touch slide listening event”

  • 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”