Home >Web Front-end >JS Tutorial >Js code to refresh frame page_javascript skills

Js code to refresh frame page_javascript skills

WBOYOriginal: 2016-05-16 18:29:33872browse

Let’s look at a simple example first:
The following takes three pages named frame.html, top.html, and bottom.html as an example to explain how to do it.
frame.html consists of two pages: top (top.html) and bottom (bottom.html). The code is as follows:

Copy code The code is as follows:

 
< HEAD> 
 frame

Now assume that top.html (i.e., the page above) has seven buttons to refresh bottom.html (i.e., the page below). You can use the following seven statements. It’s up to you which one is easier to use.
Statement 1. window.parent.frames[1].location.reload();
Statement 2. window.parent.frames.bottom.location.reload();
Statement 3. window.parent .frames["bottom"].location.reload();
Statement 4. window.parent.frames.item(1).location.reload();
Statement 5. window.parent.frames.item ('bottom').location.reload();
Statement 6. window.parent.bottom.location.reload();
Statement 7. window.parent['bottom'].location.reload() ;

The code of the top.html page is as follows:

Copy the code The code is as follows:

top.html

The following is the bottom.html page source code. In order to prove that the page below has indeed been refreshed, a dialog box pops up after the page is loaded. The code of

bottom.html page is as follows:

Copy the code The code is as follows:

 
 
 
 
 bottom.html < ;/TITLE> <br></HEAD> <br><BODY onload="alert('I was loaded!')"> <br><h1>This is the content in bottom.html. </h1> <br></BODY> <br></HTML> <br>
</div>
<br>Explain: <br>1.window refers to the current page, for example, in this example it refers to the top.html page. <br>2.parent refers to the parent page of the current page, that is, the frame page containing it. For example, for this example it refers to framedemo.html. <br>3.frames is a window object and an array. Represents all subpages within the frame. <br>4.item is a method. Returns the elements in the array. <br>5. If the subpage is also a frame page with other subpages inside, then some of the above methods may not work. <br><br>Attachment: <br> Several ways to refresh the page using Javascript: <br>1 history.go(0) <br>2 location.reload() <br>3 location=location <br>4 location .assign(location) <br>5 document.execCommand('Refresh') <br>6 window.navigate(location) <br>7 location.replace(location) <br>8 document.URL=location.href <br><br>Methods to automatically refresh the page: <br>1. Automatically refresh the page: Add the following code to the <head> area <br><meta http-equiv="refresh" content="20"> <br>20 of them means refreshing the page every 20 seconds. <br><br>2. Automatic page jump: add the following code to the <head> area <br><meta http-equiv="refresh" content ="20;url=HTTP://www.wyxg.com"> <br> Among them, 20 means jumping to HTTP://www after 20 seconds. wyxg. com page <br><br>3. The page automatically refreshes the js version <br><script language="JavaScript"> <br>function myrefresh() <br>{ <br>window.location.reload(); <br>} <br>setTimeout('myrefresh()',1000); //Specify a refresh time of 1 second<br></script> <br><br>How ASP.NET outputs the refresh parent window script statement<br><div class="codetitle">
<span><a style="CURSOR: pointer" data="61285" class="copybut" id="copybut61285" onclick="doCopy('code61285')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code61285"> <br>1. this.response.write("<script> opener.location.reload();</script>"); <br>2. this.response.write("<script>opener.window.location.href = opener.window.location.href;< /script>"); <br>3. Response.Write("<script language=javascript>opener.window.navigate(''The page you want to refresh.asp'');</script>") <br>
</div> <br>JS refresh frame script statement<br><div class="codetitle">
<span><a style="CURSOR: pointer" data="42722" class="copybut" id="copybut42722" onclick="doCopy('code42722')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code42722"> <br>//How to refresh the page containing this frame? Use <br><script language=JavaScript> <br>parent.location.reload(); <br></script> <br>//The child window refreshes the parent window<br><script language=JavaScript> <br>self.opener.location.reload(); <br></script> <br>(　or<a href="javascript:opener.location.reload ()">Refresh</a> ) <br>//How to refresh the page of another frame using <br><script language=JavaScript> <br>parent.Another FrameID.location.reload(); <br></script> <br>If you want to refresh when the window is closed or when the window is opened, just call the following statement in <body>. <br><body onload="opener.location.reload()"> Refresh when the window is open<br><body onUnload="opener.location.reload()"> Refresh when the window is closed<br>< script language="javascript"> <br>window.opener.document.location.reload() <br></script> <br>
</div> <br>//If that doesn’t work, try the following<br>Response .Write("<script language=javascript>window.opener.location.reload();window.close();</script>");<br>Here are a few articles for reference:<br> <a href="http://www.jb51.net/article/16548.htm" target="_blank">JS code for seven methods of refreshing frame subpages</a><br><br><a href="http://www.jb51.net/article/21854.htm" target="_blank">JS and frame page operation code</a></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 compatible carriage return and mouse focus event codes for multiple browsers (IE6/7/8, firefox, chrome)_javascript skills" href="https://m.php.cn/faq/22137.html">js compatible carriage return and mouse focus event codes for multiple browsers (IE6/7/8, firefox, chrome)_javascript skills</a></span><span>Next article：<a class="dBlack" title="js compatible carriage return and mouse focus event codes for multiple browsers (IE6/7/8, firefox, chrome)_javascript skills" href="https://m.php.cn/faq/22139.html">js compatible carriage return and mouse focus event codes for multiple browsers (IE6/7/8, firefox, chrome)_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></html>