Heim > Web-Frontend > js-Tutorial > Hauptteil

js-Seitenaktualisierung realisiert Aktualisierung innerhalb und außerhalb des Frames (insgesamt, teilweise)

高洛峰
Freigeben: 2016-10-12 11:18:15
Original
1666 Leute haben es durchsucht

这次总结的是框架刷新:

框架内外的按钮均可以定义网页重定向,

框架内部页面的按钮可以实现局部刷新,

框架外部页面的按钮可以实现整页刷新。

代码如下(两个html页面):

<!--主界面index.html-->
    <iframe src="页面刷新.html" frameborder="1"></iframe>
    <h1 id="iframeout">框架外内容</h1>
    <button onclick="fresh()">框架外刷新</button>
    
    <script>
        var h1 = document.getElementById(&#39;iframeout&#39;);
        function iframeout(){
            h1.style.color = "yellow";
            h1.innerText = "我变化了";
        }
        setInterval(iframeout, 800);
        function fresh(){
            // 框架主页面刷新,可以实现下面两个功能:
            top.location.reload();   //刷新整页 
            // window.parent.location.href=&#39;http://koushuling.top&#39;; //框架页重定向 
        }
    </script>
Nach dem Login kopieren
<!--框架页面:页面刷新.html-->
   <style>
        body{
            background-color: gray;
        }
    </style>
   
    <h1 id="test">框架内页面</h1>
    <button onclick="fresh()">框架内刷新</button>

    <script>
        var h1 = document.getElementById(&#39;test&#39;);
        function test(){
            h1.style.color = "red";
            h1.innerText = "我变化了";
        }
        setInterval(test, 1000);
        function fresh(){
            // 框架内页面刷新:可实现局部刷新与整个页面重定向
             self.location.reload();  //刷新框架内页面
            // window.parent.location.href=&#39;http://koushuling.top&#39;; //页面重定向 
        }
     </script>
Nach dem Login kopieren


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage