Summary of several methods to achieve partial refresh of iframe in JavaScript

Summary of several methods to achieve partial refresh of iframe in JavaScript_javascript skills

WBOY

Release： 2016-05-16 15:21:33

Original

1629 people have browsed it

Iframe is a form of frame embedded in a web page. The web page can refresh part of the content by changing the embedded part.

The usage of Iframe is similar to the ordinary tag element DIV. You can specify the position, color, interface layout, etc. to be embedded in the page

1. Method 1 to implement partial refresh of iframe

<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>

Copy after login

When you click a1, the content of a1.html will be displayed in the iframe. When you click a2, the content of a2.html will be displayed in the iframe

2. Method 2 of implementing partial refresh of iframe

<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>

Copy after login

Remarks:

also has a target attribute, which has the same effect as . This method has the same effect if or is submitted to an Action and then jumps to a1.html. If there is req.set or session.set in Action, it can also be displayed in the iframe.

Three: Method three for iframe to achieve partial refresh:

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

Copy after login

Option 1: Use iframe’s name attribute to locate

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

Copy after login

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

Copy after login

Option 2: Use the id attribute of iframe to locate

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

Copy after login

Option 3: When the src of the iframe is another website address (when operating across domains)

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

Copy after login

Option 4: Achieve partial refresh by replacing the src of iframe with

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

The sample code is as follows: test.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript">
  function partRefresh() {
   document.getElementById("iframe1Id").src = "a2.html"; // 方法一: 通过和替换iframe的src来实现局部刷新
  }
 </script>
 </head>
 <body>
  <table border="1" width="90%" align="center">
   <tr
    style="background: #F0F0E4"><td>方格1</td><td>方格2</td> <td>方格3</td>
   </tr>
   <tr>
    <td>
     <iframe src="a1.html" id="iframe1Id" name="iframe1Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a2.html" id="iframe2Id" name="iframe2Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a3.html" id="iframe3Id" name="iframe3Name" width="100%"></iframe>
    </td>
   </tr>
  </table>
  <br>
  <br>
  <input type="button" value="IFRAME局部刷新" style="margin-left: 70px;" onclick="partRefresh();">
 </body>
</html>

Copy after login

The above content introduces to you a summary of several methods to achieve partial refresh of iframe in JavaScript. I hope you can choose the one that suits you according to your needs. If you have any questions, please leave me a message. Thank you!