Summary of several methods for partial refreshing using iframe in JavaScript, javascriptiframe

Summary of several methods for partial refreshing using iframe in JavaScript, javascriptiframe

Iframe is a framework for embedding Web pages. You can change the embedded part of a Web page to refresh Part of the content.

The Iframe usage is similar to the common Tag Element DIV. You can specify the position, color, and interface layout embedded in the page.

I. iframe method 1

<script type="text/javascript"> $(function(){ $("#a1").click(function(){  var name= $(this).attr("name");  $("#iframe").attr("src",name).ready(); }) $("#a2").click(function(){  var name= $(this).attr("name");  $("#iframe").attr("src",name).ready(); })})</script><a href="#" id="a1" name="a1.html">1</a><a href="#" id="a2" name="a2.html">2</a><iframe src="" id="iframe"></iframe> 

A1.html content is displayed in iframeat a1, and a2.html content is displayed in iframeat A2.

Ii. iframe method 2

<a href="a1.html" id="a1" name="a1.html" target="i">1</a><a href="a2.html" id="a2" name="a2.html" target="i">2</a><iframe src="" id="iframe" name="i"></iframe> 

Note: <form> also has the target attribute, which is used in the same way as <a>. If <from> or <a> is delivered to an actionand then merged to a1.html, the effect is the same. If there is req in the Action. set or session. set, which can also be displayed in iframe.

Iii. iframe method 3:

<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>

Solution 1: use the name attribute of iframe to locate

<input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()">

Or

<input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()">

Solution 2: Use the id attribute of iframe to locate

<input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()">

Solution 3: When the src of iframe is another website address (during cross-origin operations)

<input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')">

Solution 4: implement partial refresh by and replacing the src of iframe

You can use document. getElementById ("iframname"). src = "" to redirect iframe;

The sample code is as follows: test.html

<! DOCTYPE html> 
The above content introduces several methods for implementing partial refresh using iframe in JavaScript. I hope you can select one that suits your needs. If you have any questions, please leave a message. Thank you!
Articles you may be interested in:

 

 
  
Without AJAX and IFRAME, let's talk about ASP + JS refreshing technologies in the true sense.
 
  
Javascript IFrame force-Refresh code
 
  
Javascript + iframe implement code for refreshing the entire page
 
  
Js dynamically creates upload forms using iframe to simulate Ajax to achieve no refreshing
 
  
Summary of methods for refreshing iframe in js