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

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

WBOYoriginal: 2016-05-16 15:21:331603parcourir

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>

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>

Remarques : ff9c23ada1bcecdd1a0fb5d5a0f18437 a également un attribut target, qui a le même effet que 3499910bf9dac5ae3c52d5ede7383485. Cette méthode a le même effet si 66fd2ada9ebb04d4250c850dc1e3737e 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>

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

<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 : Utilisez l'attribut id de l'iframe pour localiser

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

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：ceci, cela, discutez-en à nouveau en javascript, compétences _javascript super complètes (classiques)Article suivant：ceci, cela, discutez-en à nouveau en javascript, compétences _javascript super complètes (classiques)

Articles Liés

Voir plus