ISO Mobile Safari Page cache

Source: Internet
Author: User

ISO in some ways in order to pursue a better customer experience is really great, but also make it unlike other browsers, so that developers have a headache.

For example, recently made a project, but can not share, but there is a very bad effect, in the current page is forbidden to share, but the current page to

The next page back to the previous page has a sharing function, which is the safari special caching mechanism effect, is a bit like a single page

Apps can switch pages back and forth instead of refreshing page parts, like Android, although there's a caching mechanism, but it's just caching

Some features, such as scrolling height, it will still execute the JS file, but the ISO is not so, it is tentative page function, when you switch back will continue

Execute the last execution of the code, such as I set a timer on the page, when the switch back will continue to execute the last time.

All Safari encourages us to use the Window.onpageshow event to trigger some code that needs to be executed for switching back, such as triggering a built-in method,

Because this method is like Android, it will refresh the function, so you need to trigger some built-in methods to change back to the desired effect of the initial page.

Information: Portal This information or foreign comparison, the domestic data most of some rubbish, there is no comprehensiveness, and the method of a unified bug.

If used in conjunction with Popstate,pushstate, this also has a big pit is the Refresh page will appear two times back to back ....

And foreign have popstate,pushstate, browser local cache with use ... The logic of this method is very complex

Popstate,replacestate this is relatively simple.

There is pageshow,persisted, this good

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Pageshow Test</title>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0,maximum-scale=1.0, User-scalable=no"/>    <Scriptsrc= "Jquery-3.1.0.min.js"></Script>    <Linkrel= "stylesheet"href= "Jquery-ui-1.12.1/jquery-ui.css">    <Scriptsrc= "Jquery-ui-1.12.1/jquery-ui.js"></Script>    <style>. b{Margin-top:300px;Height:1000px;    }Button{width:100%;Height:30px;    }Button A{width:100%;Display:Block;    }    </style></Head><Body>    <Divclass= "B">    <PID= "Times"><span>Count:</span><spanID= "T"></span></P>        <Button><ahref= "2.html">Pagehide Test</a></Button>        <PID= "P"></P>        <PID= "P3"></P>        <PID= "P4"></P>            </Div>    <Script>    varI=0; SetInterval (function() {i++; $("#t"). html (i); }, +); $ (window). On ("Pageshow",function(Event) {$ ("#p4"). HTML ("whether to cache:"+event.originalEvent.persisted); $("#p3"). HTML ('Pageshow'); Weixinjsbridge.call ('Hidetoolbar'); Weixinjsbridge.call ('Hideoptionmenu'); $("#p"). HTML ('Weixinjsbridgeready'+i);     }); Document.addeventlistener ('Weixinjsbridgeready', functionOnbridgeready () {Weixinjsbridge.call ('Hidetoolbar'); Weixinjsbridge.call ('Hideoptionmenu'); $("#p"). HTML ('Weixinjsbridgeready');          }); functionIsios () {varu=navigator.useragent; varisweixin=U.indexof ('Micromessenger') > -1; //                varIsios= !!U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS X/); //iOS terminal                if(Isweixin&&Isios) {                    return true; }Else{                    return false; }            }    </Script></Body></HTML>

Onpageshow and Onpagehide

The event object also contains the persisted property

ISO Mobile Safari Page cache

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.