Partial refresh of the page

Scenario: Page A uses a third-party plugin C, if the page is refreshed, C will be reinitialized and the previous information cannot be recorded. Now I hope that the main functional area B of the page refreshes, but the information of C is not lost.

Solution: B is introduced into A by iframe, and self.location.reload() is used to refresh B. At this time, the content of B is refreshed, and the content of A except B remains unchanged. A needs to refresh and can use top.location.reload().

Local refresh is generally done by ajax or iframe (frameset). The reason why iframe is used here is because there is a lot of content in B, and it is more troublesome to control it with ajax.

If there are other good methods, please leave a message to help, will be very grateful!

demo:

A page:

<!--Main interface index.html-->
<iframe src="frame.html" frameborder="1" style="width:500px;height:300px;"></iframe>
<h1 id="iframeout">Out-of-frame content</h1>
<button onclick="fresh()">Refresh outside the frame</button>

<script>
    var h1 = document.getElementById('iframeout');
    function iframeout(){
        h1.style.color = "yellow";
        h1.innerText = "I changed";
    }
    setInterval(iframeout, 5000);
    function fresh(){
        // The main page of the framework is refreshed, which can achieve the following two functions:
        top.location.reload(); //Refresh the whole page
        // window.parent.location.href='http://koushuling.top'; //Frame page redirection
    }
</script>

Page B:

<h1 id="test">Framed page</h1>
<button onclick="fresh()">frame refresh</button>

<script>
    var h1 = document.getElementById('test');
    function test(){
        h1.style.color = "red";
        h1.innerText = "I changed";
    }
    setInterval(test, 2000);
    function fresh(){
        // In-frame page refresh: partial refresh and whole page redirection can be achieved
         self.location.reload(); //Refresh the page in the frame
        // window.parent.location.href='http://koushuling.top'; //Page redirection
    }
 </script>

The article about the highly adaptive iframe, the article is very early, but the idea is still useful: http://www.zhangxinxu.com/wordpress/?p=1294