Home >Web Front-end >JS Tutorial >How to use js to control the hiding or display of the frame solution_javascript skills

How to use js to control the hiding or display of the frame solution_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:39:471436browse

index.htm

Copy code The code is as follows:






Frame frame display and hiding operation - 51windows.net








<br><body></p> <p><p>This page uses frames, but your browser doesn't support them. </p></p> <p></body><br>


main.htm

Copy code The code is as follows:





main - 51windows.net







Nesting of frames:

Copy code The code is as follows:








############################################ ##

Copy code The code is as follows:



Untitled Document





<body> <br></body>

//**********************Description************************:
Frameset is a frame. A web page is divided into several blocks, and each block is a different web page file. An iframe is an embedded web page that can be embedded anywhere on a page. Generally, iframe is more flexible to use.
There should be no body tag in the page when using frames.
Frameset tags appear in pairs, starting with and ending with , with frame inside.
Frameset can also be embedded in frameset. Nested frames,frames can be nested at multiple levels.
The id in the frameset, in order to facilitate the use of Javascript to access this object later.
is as follows:

Copy code Code As follows:


















Commonly used framework structure:

HTML language analysis-frameset
<br><IFRAME> <br>■ Frame concept: <br>The so-called frame is that the web page is divided into several frames window to get multiple URLs at the same time. Just <FRAMESET> <FRAME> is enough, and all frame tags should be placed in a combined html file. This file only records how the frame is divided and will not display any data, so there is no need to put in <BODY> Mark that browsing this frame must read this file instead of the files of other frames. <FRAMESET> is used to divide frame windows. Each frame window is marked by a <FRAME> tag. <FRAME> must be used in the <FRAMESET> scope. For example: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="10123" class="copybut" id="copybut10123" onclick="doCopy('code10123')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code10123"> <br><frameset cols="50%,*"&gt ; </P> <P><frame name="hello" src="/up2u.html"> <br><frame name="hi" src="me2.html"> <br></frameset> <br> </div> <p>In this example, <FRAMESET> divides the screen into two equal parts on the left and right. Up2u.html is displayed on the left, and me2.html is displayed on the right. The frame window marked by the <FRAME> tag is always Top to bottom, left to right order. </p> <p>This section is mostly the same as the [Application Framework] of the Composer classroom, except that this section has added content and is more detailed. Just like other chapters, it does not mention web page creation tools. If you have learned HTML, I believe you will also I will choose tools such as Composer and FrontPage. </p> <p>■ <FRAMESET> <FRAME> : ▲Top </p> <p><FRAMESET> is called a frame tag, which is used to declare the HTML document to be in frame mode and set how the window is divided. <br><FRAME> just sets the parameter attributes in a certain frame window. <br><FRAMESET> Parameter setting: <br>Example: <frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> </p> <p>COLS="90,*" <br>Cut the screen vertically (for example, into two left and right screens), accept integer values ​​and percentages, * means occupying the remaining space. The number of values ​​represents the number of divided windows and is separated by commas. For example, COLS="30,*,50%" can be divided into three windows. The first window has a width of 30 pixels and is an absolute division. The second window is what remains after the first and third windows are allocated. The space below, the third window occupies 50% of the entire screen, and the width is a relative split. You can adjust the numbers yourself. <br>ROWS="120,*" <br>It is horizontal cutting, separating the top and bottom of the screen. The value setting is the same as above. Only the two parameters COLS and ROWS should not be in the same <FRAMESET> tag, because Netacape sometimes cannot display this type of frame, so use multiple splits. <br>frameborder="0" <br>Set the border of the frame, its value is only 0 and 1, 0 means no border, 1 means to display the border. (Avoid yes or no) <br>border="0" <br>Set the border thickness of the frame, in pixels. <br>bordercolor="#008000" <br>Set the border color of the frame. <br>framespacing="5" <br>Indicates the space between frames to preserve the space. <br><FRAME> Parameter settings: <br>Example: <frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0 " noresize framespacing="6" bordercolor="#0000FF"> </p> <p>SRC="a.html"<br>Set the name of the web page file to be displayed in this frame window. Each frame window must correspond to a web page file. You can use absolute paths or relative paths, see [Link Advanced] for details on both. <br>NAME="top"<br>Set the name of this frame window so that you can specify the frame for linking. It must be named arbitrarily. <br>frameborder=0<br>Set the border of the frame, its value is only 0 and 1, 0 means no border, 1 means to display the border. (Avoid using yes or no) <br>framespacing="6"<br>Indicates the space between frames to preserve white space. <br>bordercolor="#008000"<br>Set the border color of the frame. Please refer to [HTML Analysis] for color values. <br>scrolling="Auto"<br>Set whether to display the scroll, YES means to display the scroll, NO means not to display it anyway, AUTO means to display it according to the situation. The <br>noresize<br> setting does not allow the user to change the size of this frame, and this parameter is not set. The user can pull the frame to change its size at will. <br>marginhight=5<br> represents the space reserved at the edge of the frame height. <br>marginwidth=5<br> represents the space reserved at the edge of the frame width. <br>The following are some examples: (Same as the [Application Framework] of Composer Classroom) <br>Example HTML Code <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="36826" class="copybut" id="copybut36826" onclick="doCopy('code36826')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code36826"> <br><frameset rows="80,*"> <br><frame name="top" src="/a.html"> <br>&lt ;frame name="bottom" src="/b.html"> <br></frameset> <br> </div> <br>Example HTML Code <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="56716" class="copybut" id="copybut56716" onclick="doCopy('code56716')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code56716"> <br><frameset rows="80,*,80"> <br><frame name="top" src="/a.html"> <br><frame name="middle" src="/b.html"> <br><frame name="bottom" src="/c.html" > <br></frameset> <br> </div> <br>Example HTML Code <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23604" class="copybut" id="copybut23604" onclick="doCopy('code23604')"><u>Copy code </u></a></span> The code is as follows :</div> <div class="codebody" id="code23604"> <br><frameset cols="150,*"> <br><frameset rows="80,*"> <br><frame name="upper_left" src= "/a.html"> <br><frame name="lower_left" src="/b.html"> <br></frameset> <br><frame name="right" src= "/c.html"> <br></frameset> <br> </div> <br>Example HTML Code <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="22940" class="copybut" id="copybut22940" onclick="doCopy('code22940')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code22940"> <br><frameset rows=" 80,*"> <br><frame name="top" src="/a.html"> <br><frameset cols="150,*"> <br><frame name= "lower_left" src="/b.html"> <br><frame name="lower_right" src="/c.html"> <br></frameset> <br></frameset> <br> </div> <br>Example HTML Code <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="98373" class="copybut" id="copybut98373" onclick="doCopy('code98373')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code98373"> <br> <frameset cols="150,*"> <br><frame name="left" src="/a.html"> <br><frameset rows="80,*"> <br><frame name="upper_right" src="/b.html"> <br><frame name="lower_right" src="/c.html"> <br></frameset> <br></frameset> <br> </div> <p>■ <NOFRAMES> : ▲Top </p> <p>When the browser used by others is too old and does not support the frame function, what they see will be blank. To avoid this, you can use the <NOFRAMES> tag. When the user's browser cannot see the frame, he will see the content between <NOFRAMES> and instead of one piece. blank. These contents can be words reminding users to switch to a new browser, or even a web page without frames or a page that can automatically switch to a version without frames.
Application method:
Add the tag in the tag range. The following is an example:

Copy code The code is as follows:


<br><body> <br>Sorry for the feedback. The browser you are using does not support frames. Please switch to a new browser. <br></body> <br>



If the browser supports frames, then it will ignore the things in . However, if the browser does not support frames, because it does not recognize all frame tags, unknown tags will be skipped, and things surrounded by tags will be ignored. will be interpreted, so text placed within the <noframes> range will be displayed. </p> <p>■ <IFRAME> : ▲Top </p> <p>This tag only works in IE. Its function is to insert a frame window in the middle of a web page to display another file. It is a surrounding tag, but the surrounding words will only be displayed when the browser does not support the iframe tag, such as <noframes>, and you can put some reminder words and the like. It is usually better to use an iframe with a Java Script that recognizes the browser. If the javascript recognizes that the browser is not Internet Explorer, it will switch to another version. The parameter settings of <br><iframe> are as follows: <br>Example:<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="24413" class="copybut" id="copybut24413" onclick="doCopy('code24413')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code24413"> <br><iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1 " scrolling="Yes"> <p>src="iframe.html" <br></p> </div> <br>In addition to the file name, the file source that you want to display in this frame must include a relative or absolute path. <br>name="test" <br>The name of this frame, which is required by the target parameter of the link tag, <br>align="MIDDLE" <br>The optional values ​​are left, right, top, middle, bottom , not very useful <br>width="300" height="100" <br>The width and length of the frame window, in pixels. <br>marginwidth="1" marginheight="1" <br>The space reserved for the inserted file and the frame. <br>frameborder="1" <br>Use 1 to display the border, 0 to not display it. (Can be yes or no) <br>scrolling="Yes" <br>Use Yes to allow scrolling (default), No to not allow scrolling. <br>Example: Source code<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="67397" class="copybut" id="copybut67397" onclick="doCopy('code67397')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code67397"> <br><center> &lt ;iframe src="http://www.jb51.net/" name="test" align="center" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1 "> <br>Sorry, the browser you are using does not support IFrame and cannot browse my webpage normally. </iframe><br></center> <br> </div> <br>Show results <p>Most forums use left and right frame codes - how to get the src value of frame in index.htm~~Using JavaScript to implement loading of Frame on any page when accessing this site. Control of the dynamic pulling of frames in web pages. How does javascript operate the diagram method in the field in the frame page HTML --- the javascript code of the Frame column </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="JS code for Young's matrix search_javascript skills" href="https://m.php.cn/faq/17735.html">JS code for Young's matrix search_javascript skills</a></span><span>Next article:<a class="dBlack" title="JS code for Young's matrix search_javascript skills" href="https://m.php.cn/faq/17737.html">JS code for Young's matrix search_javascript skills</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>