Résumé de plusieurs méthodes pour réaliser un rafraîchissement partiel de l'iframe dans les compétences JavaScript

Résumé de plusieurs méthodes pour réaliser un rafraîchissement partiel de l'iframe dans les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 15:21:33

original

1600 Les gens l'ont consulté

Iframe est une forme de cadre intégré dans une page Web. La page Web peut actualiser une partie du contenu en modifiant la partie intégrée.

L'utilisation d'Iframe est similaire à l'élément de balise ordinaire DIV. Vous pouvez spécifier la position, la couleur, la disposition de l'interface, etc. à intégrer dans la page

1. Méthode 1 pour implémenter le rafraîchissement partiel de l'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>

Copier après la connexion

Lorsque vous cliquez sur a1, le contenu de a1.html sera affiché dans l'iframe. Lorsque vous cliquez sur a2, le contenu de a2.html sera affiché dans l'iframe
.

2. Méthode 2 d'implémentation du rafraîchissement partiel de l'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>

Copier après la connexion

Remarques :

a également un attribut target, qui a le même effet que . Cette méthode a le même effet si est soumis à une action et saute ensuite. à a1.html S'il y a req.set ou session.set dans Action, il peut également être affiché dans l'iframe.

Trois : Méthode trois pour que l'iframe obtienne un rafraîchissement partiel :

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

Copier après la connexion

Option 1 : Utiliser l'attribut name de l'iframe pour localiser

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

Copier après la connexion

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

Copier après la connexion

Option 2 : Utilisez l'attribut id de l'iframe pour localiser

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

Copier après la connexion

Option 3 : Lorsque le src de l'iframe est une autre adresse de site Web (lors d'un fonctionnement cross-domain)

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

Copier après la connexion

Option 4 : Réaliser un rafraîchissement partiel en remplaçant le src de l'iframe par

Vous pouvez utiliser document.getElementById("iframname").src="" pour rediriger l'iframe

L'exemple de code est le suivant : 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>

Copier après la connexion

Le contenu ci-dessus vous présente un résumé de plusieurs méthodes pour réaliser un rafraîchissement partiel de l'iframe en JavaScript. J'espère que vous pourrez choisir celle qui vous convient en fonction de vos besoins. Si vous avez des questions, laissez-moi un message. Merci!