Of Stack

Summary of several methods in JavaScript that iframe implements local refreshes

  • 2020-11-25 07:07:27
  • OfStack

Iframe is a form of frame embedded in web pages. Web pages can refresh some content by changing the embedded part.

Iframe is used similar to the regular tag element DIV in that you can specify the location, color, interface layout, and so on to embed within a page

1. iframe implements local refresh 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>

Click a1 to display es17EN1.html in iframe, click a2 to display a2.html

iframe method 2 for local refreshes 


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

Remark: < form > There are also target properties, actions and < a > So this is the way if < from > or < a > Commit to an Action and then jump to a1.html. If you have req.set or ES50en.set in Action, it will also show up in iframe.

3: iframe local refresh method 3: 


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

Scheme 1: Use the name attribute of iframe for positioning 


<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()">

Option 2: Use the id attribute of iframe for positioning 


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

Scenario 3: When iframe's src is another site address (when operating across domains) 


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

Scenario 4: Local refreshes are achieved by and replacing src of iframe

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

The sample code is as follows: ES89en.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"; //  methods 1:  Pass and replace iframe the src To implement local refreshes 
  }
 </script>
 </head>
 <body>
  <table border="1" width="90%" align="center">
   <tr
    style="background: #F0F0E4"><td> grid 1</td><td> grid 2</td> <td> grid 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 Local refresh " style="margin-left: 70px;" onclick="partRefresh();">
 </body>
</html>

Above content introduces JavaScript iframe to achieve local refresh of several methods summary, I hope you according to their own needs to choose suitable for their own, any questions welcome to leave a message, thank you!

Related articles: