Home > Article > Web Front-end > JavaScript framework programming

JavaScript framework programming

高洛峰Original: 2016-11-25 11:41:421001browse

Use JavaScript framework
When talking about the window object, we mentioned that a web page within a frame is also a window object, that is to say, a Frame object is also a window object. In the simplest terms, each HTML file occupies a window object, including the web page that defines the frame (the "frame page"). In IE, the frame inserted into the document using the "" tag is also a window object, but using the "include web page" method (shown as "") The HTML read does not occupy a separate window object. Each frame is a sub-object of the window object that contains its page (I don’t know if it should be called a “property” or not). To reference it, you can use one of the following methods: <br>window.frames[x]<br>window .frames[frameName]<br>window.frameName<br>　Where, x refers to the frame specified in the window object. Like other arrays, x also starts from zero. frameName refers to the name of the frame, which is the same as the "name" attribute in <frame>. </p> <p>　If the window object specified using window.frameName is also a frame web page, then the method of referencing its frame: window.frameName.subFrameName. And so on. </p> <p> It should be noted that no matter where the "window" object is referenced, what is returned is the "current" window object. If you want to access other window objects, you need to use the parent and top attributes. parent refers to the "parent" window object, which is the frame web page containing the current window object; top refers to the window object at the top of the window. </p> <p>　When using frameworks, you also need to pay close attention to the global variables and custom functions defined in your JavaScript. They all have their own window object. To reference global variables or custom functions in other frameworks, you have to use the annoying method of "window object.frame object[.frame object...].global variables or custom functions". </p> <p>　The above problem is often ignored when establishing a connection: If a default target window (<base target="...">) is defined in <head>, in <a href="http ://www.php1.cn/"></p> <p>Frame Programming Overview<br>An HTML page can have one or more sub-frames, which are marked with <iframe> and are used to display an independent HTML page. The framework programming discussed here includes self-control of frameworks and mutual access between frameworks, such as referencing JavaScript variables in another framework from one framework, calling functions in other frameworks, controlling the behavior of forms in another framework, etc. <br>Mutual references between frames<br>All frames in a page are provided as attributes of the window object in the form of a collection. For example: window.frames represents the collection of all frames in the page, which is the same as form objects, link objects, picture objects, etc. are similar, except that these collections are attributes of the document. Therefore, to reference a subframe, you can use the following syntax: </p> <p>1. Reference from parent frame to child frame <br> Knowing the above principles, it becomes very easy to reference child frames from parent frame, that is: 2. Reference from child frame to parent frame<br>Each window object has a parent attribute that represents its parent frame. If the frame is already a top-level frame, window.parent also represents the frame itself. </p> <p>3. References between sibling frames<br>If two frames are sub-frames of the same frame, they are called sibling frames. They can reference each other through the parent frame. For example, a page includes 2 sub-frames: </p> <p><br>Change the loading page of the frame <br>A reference to a frame is a reference to the window object. Using the location attribute of the window object, you can change the navigation of the frame, for example: </p> <p> </p> <p>Referencing JavaScript variables and functions in other frameworks<br>Referring to JavaScript variables and functions in other frameworks Before the function technology, let’s take a look at the following code: <br>window.frames["frameName"];<br>window.frames.frameName<br>window.frames[index]<br>Among them, the word window can also be replaced or omitted with self, assuming frameName is The first frame in the page, the following writing is equivalent: <br>self.frames["frameName"]<br>self.frames[0]<br>frames[0]<br>frameName<br>Each frame corresponds to an HTML page, so This frame is also an independent browser window, which has all the properties of a window. The so-called reference to the frame is also a reference to the window object. With this window object, you can easily operate the pages in it, such as using the window.document object to write data to the page, using the window.location property to change the page in the frame, etc. <br>The following introduces the mutual references between different levels of frames: <br>window.frames["frameName"];<br>In this way, the sub-frame named frameName in the page is referenced. If you want to reference a subframe within a subframe, according to the nature of the window object, the referenced frame can be implemented like this: <br>window.frames["frameName"].frames["frameName2"];<br>In this way, the second-level subframe is referenced Frames, and so on, can realize the reference of multi-layer frames. </p> <p><br><frameset rows="50%,50%"><br> <frame src="1.html" /><br> <frame src="2.html" /><br></frameset> <br>In frame1, you can use the following statement to reference frame2: <br>self.parent.frames["frame2"];<br>4． Mutual references between different levels of frameworks<br>The level of the framework is for the top-level framework. When the levels are different, as long as you know the level where you are and the level and name of the other frame, you can easily access each other by using the properties of the window object referenced by the frame, for example: <br>self.parent.frames["childName"] .frames["targetFrameName"];<br>5． The reference to the top-level frame is similar to the parent attribute. The window object also has a top attribute. It represents a reference to the top-level framework, which can be used to determine whether a frame itself is a top-level framework, for example: <br>//Judge whether this frame is a top-level framework <br>if(self==top){<br> window.frames[0].location="1.html";<br>This will redirect the page of the first frame in the page to 1.html. Using this property, you can even use one link to update multiple frames. <br><frameset rows="50%,50%"><br> <frame src="1.html" /><br> <frame src="2.html" /><br></frameset><br> <br><a href="http://www.php1.cn/"><br> <br><script language="JavaScript" type="text/javascript"><br><br>&lt ;/script><br>If you run this code, a "hello, ajax!" window will pop up, which is the result of executing the hello() function. So why did hello() become a method of the window object? Because all global variables and global functions defined within a page are members of the window object. For example: <br>var a=1;<br>alert(window.a);<br>A dialog box will pop up showing 1. The same principle applies to sharing variables and functions between different frameworks by calling them through the window object. <br>For example: a product browsing page consists of two sub-frames. The left side represents links to product categories; when the user clicks the category link, the corresponding product list is displayed on the right side; the user can click the [Purchase] link next to the product to purchase the product. add to the cart. <br>In this example, the left navigation page can be used to store the products that the user wants to purchase, because when the user clicks the navigation link, what changes is another page, the product display page, while the navigation page itself remains unchanged. Therefore, the JavaScript variables will not be lost and can be used to store global data. The implementation principle is as follows: <br>Assume that the page on the left is link.html and the page on the right is show.html. The page structure is as follows: <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt ;<br/><html><br><head><br><title> New Document </title><br></head><br><frameset cols="20%,80%"><br> <frame src= "link.html" /><br> <frame src="show.html" /><br></frameset><br></html><br>You can add such a statement next to the products displayed in show.html: <br><a href="http://www.php1.cn/"> where link represents the navigation frame, the arrOrders array is defined in the link.html page to store the id of the product, and the function addToOrders() is used to respond to the product In the click event of the [Purchase] link next to it, the parameter id it receives represents the ID of the product. In the example, it is a product with an ID of 32068: <br><script language="JavaScript" type="text/javascript"><br>&lt ;!--<br>var arrOrders=new Array();<br>function addToOrders(id){<br> arrOrders.push(id);<br>}<br>//--><br></script><br>In this way, on the checkout page Or you can use arrOrders on the shopping cart browsing page to get all the products you are ready to purchase. <br>The framework can divide a page into multiple modules with independent functions. Each module is independent of each other, but can be connected through the reference of the window object. It is an important mechanism in Web development. In Ajax development, you can also use hidden frames to implement various techniques. When introducing Ajax example programming later, you will find that this technology will be used to upload files without refreshing and solve the forward and backward problems of Ajax. <br><br><br><br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="JavaScript event mechanism" href="https://m.php.cn/faq/340908.html">JavaScript event mechanism</a></span><span>Next article：<a class="dBlack" title="JavaScript event mechanism" href="https://m.php.cn/faq/340910.html">JavaScript event mechanism</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>