这次总结的是框架刷新:
框架内外的按钮均可以定义网页重定向,
框架内部页面的按钮可以实现局部刷新,
框架外部页面的按钮可以实现整页刷新。
代码如下(两个html页面):
1 <!--主界面index.html--> 2 <iframe src='/images/loading.gif' data-original="页面刷新.html" frameborder="1"></iframe> 3 <h1 id="iframeout">框架外内容</h1> 4 <button onclick="fresh()">框架外刷新</button> 5 6 <script> 7 var h1 = document.getElementById('iframeout'); 8 function iframeout(){ 9 h1.style.color = "yellow";10 h1.innerText = "我变化了";11 }12 setInterval(iframeout, 800);13 function fresh(){14 // 框架主页面刷新,可以实现下面两个功能:15 top.location.reload(); //刷新整页 16 // window.parent.location.href='http://koushuling.top'; //框架页重定向 17 }18 </script>
1 <!--框架页面:页面刷新.html--> 2 <style> 3 body{ 4 background-color: gray; 5 } 6 </style> 7 8 <h1 id="test">框架内页面</h1> 9 <button onclick="fresh()">框架内刷新</button>10 11 <script>12 var h1 = document.getElementById('test');13 function test(){14 h1.style.color = "red";15 h1.innerText = "我变化了";16 }17 setInterval(test, 1000);18 function fresh(){19 // 框架内页面刷新:可实现局部刷新与整个页面重定向20 self.location.reload(); //刷新框架内页面21 // window.parent.location.href='http://koushuling.top'; //页面重定向 22 }
23 </script>
如有错误,请您更正!
原标题:js页面刷新之实现框架内外刷新(整体、局部)
关键词:JS