Webpage iframe causes the mobile browser to crash solution

The project we just launched uses iframe embedded web pages to implement the function similar to preview PDF on the mobile phone end! Some customers reported that WeChat crashed when it opened the webpage. After repeated checks and corrections, we found that too many nested iframe can indeed cause browser crashes.

Iframe alternative solution

Although we have improved and optimized iframe performance and code to the maximum extent, too many nested iframe will cause WeChat to crash. Therefore, we can only think of the simplest alternative!

Jquery load (url) solution

Jquery has a load event,

For example:

$ (Window). load (function () {}) is equivalent to window. onload = function (){...}

We are talking about jquery's load () method today !!

Jquery's load () method is similar to the $. GET method, but the load () method allows us to insert a part of the remote document, for example:

$ ("# Result"). load ("ajax/test.html # container ");

The result id only loads the content of the ajax/test.html document id in the container!
Jquery's load parameters are as follows:

. Load (url, data, complete)
Complete is a callback and can be a function.

In this way, the changes are very small. You only need to change the previous iframe to a div. Assign a value to the corresponding id for the original urL dynamic load event!

Jquery load (url) solution problems

Although it is easy to replace iframe with jquery load (url), there are also some problems!

Problem 1: code redundancy

Although jquery load (url) can filter some tags, many of the css and js referenced on each page will be referenced multiple times. We can only modify the previous template, merge some js and css externally referenced files, and load them on the existing page. Remove unused headers from each page, leaving only the div we want to use.

Problem 2: js files are not executed

To solve this problem, we reload the js in the execution page in the callback function after each load url. Some code is as follows:

Dimensions ('items _ wrap div [id ^ = "page"] '). each (function (index, elem ){
Var _ scr = '/Datareport/' + _ this. pageConfig [index] + '/' + year + month + '/' + (index + 1 );
$ (This). load (_ scr, function (){
$ ('#' + (_ This. pageConfig [index] + "SC") pai.html ()
});
})

In the above function, pageConfig is declared as follows:

PageConfig: ['page01', 'page02', 'page03', 'page0401 ', 'page0402', 'page05 ', 'page06', 'page07', 'page08 ', 'page09']

Js on the page is written as follows:

<Script type = "text/javascript" id = "page05sc"> write the js logic on the page </script>

In this way, the JavaScript code on each page can be successfully executed!

Question 3: dynamically change the date, refresh the div load url, and do not call some externally introduced files!

The reason is that the externally referenced file is written in the self-called anonymous function.

1. Use sea. js or require. js for js dependencies.
2. Simple brute force method: expose the function directly, remove the anonymous function, give you a name, and then call this function in js!
This will solve the problem of replacing iframe with load (url!

Other solutions

Other solutions are to be improved and supplemented! You are also welcome to pay attention to and add your own solutions and ideas!