Home > Article > Web Front-end > Summary of several methods to achieve partial refresh of iframe in JavaScript_javascript skills

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

WBOYOriginal: 2016-05-16 15:21:331598browse

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>

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>

Remarks: ff9c23ada1bcecdd1a0fb5d5a0f18437 also has a target attribute, which has the same effect as 3499910bf9dac5ae3c52d5ede7383485. This method has the same effect if 66fd2ada9ebb04d4250c850dc1e3737e or 3499910bf9dac5ae3c52d5ede7383485 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>

Option 1: Use iframe’s name attribute to locate

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

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

Option 2: Use the id attribute of iframe to locate

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

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','')">

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：this, this, discuss this in javascript again, super comprehensive (classic)_javascript skillsNext article：this, this, discuss this in javascript again, super comprehensive (classic)_javascript skills

See more

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

Related articles