recherche

Maison >interface Web >js tutoriel >Explication détaillée de la méthode d'instance de Jquery pour obtenir tous les niveaux d'éléments, de contenu ou d'ID d'iframe

Explication détaillée de la méthode d'instance de Jquery pour obtenir tous les niveaux d'éléments, de contenu ou d'ID d'iframe

伊谢尔伦
伊谢尔伦original
2017-06-19 13:19:142472parcourir

Récupérer les éléments de la page parent dans la sous-page iframe
Le code est le suivant :

$('#objId', parent.document);
// 搞定...

Récupérer les éléments de la sous-page iframe dans la page parent
Le code est le suivant :

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()
$("#testId", document.frames("iframename").document).html();

Récupérez l'élément dont l'ID est "testId" en fonction du nom iframe 

$(window.frames["iframeName"].document).find("#testId").html()

Utilisez JS ou jQuery pour accéder à l'iframe dans la page, compatible avec IE/FF
Remarque : Les pages dans le cadre ne peuvent pas traverser les domaines !

Supposons qu'il y ait deux pages sous le même domaine. Le fichier
index.html contient un contenu iframe :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>页面首页</title>  
</head>  
  
<body>  
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>  
</body>  
</html>

contenu iframe.html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>iframe.html</title>  
</head>  
  
<body>  
<div id="test">www.koyoz.com</div>  
</body>  
</html>

1. .html pour un accès direct :
JavaScriptcode

document.getElementById(&#39;koyoz&#39;).contentWindow.document.getElementById
(&#39;test&#39;).style.color=&#39;red&#39;

Accédez à la page iframe avec le nom d'ID 'koyoz' dans index.html, et obtenez le objet avec le nom d'ID 'test' dans cette page iframe, et mettez Sa couleur est définie sur rouge.
Ce code a été testé et peut prendre en charge IE/firefox.

2. avec jQuery dans index.html :
Code JavaScript

$("#koyoz").contents().find("#test").css(&#39;color&#39;,&#39;red&#39;);

L'effet de ce code est le même que l'accès direct via JS. Avec l'aide du framework jQuery, le code est plus court. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Explication détaillée de la différence entre la longueur size() dans jqueryArticle suivant：Explication détaillée de la différence entre la longueur size() dans jquery

Articles Liés

Voir plus