jQuery obtient l'élément iframe-js tutoriel-php.cn

jQuery obtient l'élément iframe

php中世界最好的语言

Libérer： 2018-04-26 10:33:28

original

5647 Les gens l'ont consulté

Cette fois, je vais vous apporter jQuery pour obtenir des éléments iframe. Quelles sont les précautions pour jQuery pour obtenir des éléments iframe. Ce qui suit est un cas pratique, jetons un coup d'œil.

Plusieurs façons d'obtenir des éléments dans iframe avec jquery :

Récupérer les éléments de la page parent sur les sous-pages iframe

Le code est le suivant :

$(&#39;#objId&#39;, parent.
document
);

Copier après la connexion

Terminé...

Récupérer les éléments de la sous-page iframe sur la page parent :

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

Copier après la connexion

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

$("#testId", document.frames("iframename").document).html();

Copier après la connexion

Récupérez l'élément dont l'ID est "testId" selon iframename

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

Copier après la connexion

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 dans le même domaine.

Dans l'index Fichier .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>

Copier après la connexion

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>
<p id="test">www.jb51.net</p>
</body>
</html>

Copier après la connexion

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

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

Copier après la connexion

<🎜. > via l'index .html accède à la page iframe avec le nom d'ID 'koyoz', obtient l'objet avec le nom d'ID 'test' dans cette page iframe et définit sa couleur sur rouge

Ce code a été testé. et peut être pris en charge par IE/firefox.

2. Utilisez jQuery pour accéder à index.html :

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

Copier après la connexion

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

Recueillir quelques exemples sur Internet :

Utiliser jQuery pour récupérer la valeur d'un élément de la fenêtre parent dans IFRAME, Je dois utiliser la méthode DOM combinée avec la méthode jquery

1 Opérer dans la fenêtre parent pour sélectionner tous les boutons radio dans l'IFRAME

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

Copier après la connexion

2. sélectionnez tous les boutons radio dans la fenêtre parent

$(window.parent.document).find("input:radio").attr("checked","true");

Copier après la connexion

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

Copier après la connexion

I croyez que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :