Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use iframe and _ window.onload". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use iframe and _ window.onload".

Preface

On the project, I need to wait for the page to load and then execute a method to modify the color of the page, so the export is solved by using onload, but this does not solve the problem I encountered, because I found that the page on my project is still not loaded, and it took me a long time to know that it is because the project uses the very old iframe to operate, and the method can only be implemented after the iframe is loaded. I'm going to talk about how traditional, native JS uses onload.

A common method on the Internet:

_ window.onload=function () {document.getElementById ("bg") .style.backgroundColor = "# F00";}

Explanation: _ window.onload can't be executed until all the elements on the page, including the image, have been loaded.

Another way to write it is:

Console.log ("load. Body javascript"); window. "nl" ad=function () {console.log ("load. Body window javascript");}

Explanation: waiting for the body to finish loading, the loadBody () method is executed. Execute after window and dom, always last. The onload function here overrides _ window.onload

The above didn't solve my problem, so I checked the jQuery method I didn't really want to use: $(document) .ready, wondering if it could be implemented in native JS:

Function ready (fn) {if (document.addEventListener) {/ / standard browser document.addEventListener ('DOMContentLoaded',function () {/ / logout time to avoid repeatedly triggering document.removeEventListener (' DOMContentLoaded',arguments.callee,false); fn (); / / run function}, false) } else if (document.attachEvent) {/ / IE browser document.attachEvent ('onreadystatechange',function () {if (document.readyState=='complete') {document.detachEvent (' onreadystatechange',arguments.callee); fn (); / / function run}});}}

But I found that there was no change in my project, and it still couldn't be used on the project, which made me worry. I suddenly thought of the iframe used on the project, so I searched it.

What is iframe?

The HTML inline frame element () represents a nested browsing context. It can embed another HTML page into the current page. Each embedded browsing context (embedded browsing context) has its own session history (session history) and DOM tree. A browsing context that contains embedded content is called a parent browsing context. The top-level browsing context (without a parent) is usually a browser window represented by a Window object.

The iframe page is separate from the parent page (parent), so it means that this is a separate area that is not affected by the parent's CSS or the global JavaScript.

Main advantages:

(1) Web page editors (WYSIWYG Online HTML Editor), because they need to reset their own CSS to their own standards, instead of being parent CSS's override.

(2) sandbox isolation.

(3) need to maintain independent focus and sub-windows of history management, such as complex Web applications.

Disadvantages:

(1) the style / script requires additional linking, which will increase the request.

(2) fortunately, iframe can display all the original web pages intact, but if it is used on the home page, it is the most annoying thing for search engines.

(3) the creation of iframe is 1-2 orders of magnitude slower than that of other DOM elements including scripts and css.

(4) iframe will block the Onload event of the main page

Well, after talking about so many pros and cons, we still need to look at specific projects to solve the project problems, so how to solve the onload?

/ / determine whether frameObj is loaded when the page is loaded. _ window.onload = function () {var frameObj= document.getElementById ("frameID"); / / if loaded, execute method if (frameObj.attachEvent) {/ / IE frameObj.attachEvent ("onload", function () {yourfunction ();});} else {/ / non-IE frameObj.onload = function () {yourfunction () };}}

There are two important points in this code. First, you need to use _ window.onload and you need to know the attachEvent method.

Write so long code, or put IE into consideration, after all, is the Windws kernel, do not want to delete it to hide it, recently in writing the front-end code, found that if the project did not use jQuery, has not used jQuery, the code is relatively neat, and the new vue, react have their own good packaging ideas, so I wrote the dollar character can finally be used.

Thank you for reading, the above is the content of "how to use iframe and _ window.onload", after the study of this article, I believe you have a deeper understanding of how to use iframe and _ window.onload, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.