recherche

Maison >interface Web >js tutoriel >code d'implémentation js pour déterminer si des éléments dans iframe existent

code d'implémentation js pour déterminer si des éléments dans iframe existent

高洛峰
高洛峰original
2017-01-12 11:00:481420parcourir

Cet article vous présentera js pour déterminer si l'élément dans l'iframe existe du code. Les amis qui ont besoin d'en savoir plus peuvent le saisir pour référence.

1. La méthode d'implémentation js originale pure, le code est le suivant : 

<script>
var bb = document.getElementById(&#39;PreviewArea&#39;).contentWindow.document.getElementById(&#39;aPic&#39;);
if( bb )
{
}
else
{
}
//apic为子页面Preview.aspx里面元素的Id
</script>
<body>
<iframe name="PreviewArea" id="PreviewArea" scrolling="yes" width="100%" height="290" frameborder="1" src="Preview.aspx"></iframe>
</body>

2 La méthode d'implémentation jquery désormais populaire, le code est le suivant. : 

if($(window.frames["iframepage"].document).find(&#39;.l-grid-row-cell&#39;).length > 0){ 
　　alert(1);
}else{
　　alert(2);
}

Le code ci-dessus détermine si l'élément avec le CSS de 1-grid-row-cell dans l'iframe avec l'identifiant de iframepage existe.
Ci-joint

Plusieurs méthodes de Jquery pour obtenir des éléments dans iframe
Obtenir les éléments de la page parent dans les sous-pages iframe

$(&#39;#objId&#39;, parent.document);
// 搞定...
在父页面 获取iframe子页面的元素
  
$("#objid",document.frames(&#39;iframename&#39;).document)
$(document.getElementById(&#39;iframeId&#39;).contentWindow.document.body).html()

Afficher le contenu de l'élément body dans l'iframe

$("#testId", document.frames("iframename").document).html();
根据iframename取得其中ID为"testId"元素
  
$(window.frames["iframeName"].document).find("#testId").html()

2. 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 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.php.cn</div>
</body>
</html>

1. Exécutez JS dans index.html pour un accès direct :

document.getElementById('koyoz' ).contentWindow.document .getElementById('test').style.color='red'

Accédez à la page iframe avec le nom d'ID 'koyoz' dans index.html, et obtenez la page iframe avec l'ID nommez l'objet 'test' et définissez sa couleur sur rouge
Ce code a été testé et peut prendre en charge IE/Firefox.
2. Accès avec jQuery dans index.html :

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

L'effet de ce code est le même que celui de l'accès direct JS Grâce à l'aide du framework jQuery, le code est plus court.
De plus, certains internautes ont fourni les exemples suivants :
Utiliser jQuery dans Pour obtenir la valeur d'un élément de la fenêtre parent dans IFRAME, nous devons utiliser la combinaison de la méthode DOM et de la méthode jquery.

1. Sélectionnez tous les boutons radio de l'IFRAME dans la fenêtre parent

$(window.frames["iframe1"].document).find("input:radio"). "checked","true");
2. Sélectionnez tous les boutons radio de la fenêtre parent dans l'IFRAME

$(window.parent.document).find("input:radio ").attr ("checked","true");
Si la fenêtre parent souhaite obtenir l'Iframe dans l'IFrame, ajoutez simplement un cadre enfant, tel que :

$(window.frames[ "iframe1" ].frames["iframe2"].document).find("input:radio").attr("checked","true")

Plus de js pour déterminer si des éléments dans iframe existent Pour les articles liés à code d'implémentation, veuillez faire attention au site Web PHP 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：js pour empêcher les pages Web d'être imbriquées par des cadres iframe et les différences entre plusieurs location.hrefsArticle suivant：js pour empêcher les pages Web d'être imbriquées par des cadres iframe et les différences entre plusieurs location.hrefs

Articles Liés

Voir plus