Home > Article > Web Front-end > js page refresh realizes refresh inside and outside the frame (whole, partial)
这次总结的是框架刷新:
框架内外的按钮均可以定义网页重定向,
框架内部页面的按钮可以实现局部刷新,
框架外部页面的按钮可以实现整页刷新。
代码如下(两个html页面):
<!--主界面index.html--> <iframe src="页面刷新.html" frameborder="1"></iframe> <h1 id="iframeout">框架外内容</h1> <button onclick="fresh()">框架外刷新</button> <script> var h1 = document.getElementById('iframeout'); function iframeout(){ h1.style.color = "yellow"; h1.innerText = "我变化了"; } setInterval(iframeout, 800); function fresh(){ // 框架主页面刷新,可以实现下面两个功能: top.location.reload(); //刷新整页 // window.parent.location.href='http://koushuling.top'; //框架页重定向 } </script>
<!--框架页面:页面刷新.html--> <style> body{ background-color: gray; } </style> <h1 id="test">框架内页面</h1> <button onclick="fresh()">框架内刷新</button> <script> var h1 = document.getElementById('test'); function test(){ h1.style.color = "red"; h1.innerText = "我变化了"; } setInterval(test, 1000); function fresh(){ // 框架内页面刷新:可实现局部刷新与整个页面重定向 self.location.reload(); //刷新框架内页面 // window.parent.location.href='http://koushuling.top'; //页面重定向 } </script>