Explication détaillée des méthodes courantes permettant à jQuery d'obtenir des éléments dans iframe

Explication détaillée des méthodes courantes permettant à jQuery d'obtenir des éléments dans iframe_jquery

WBOY

Libérer： 2016-05-16 15:19:46

original

1288 Les gens l'ont consulté

Cet article analyse les méthodes courantes de jQuery pour obtenir des éléments en iframe. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

Récupérez l'élément de la page parent dans la sous-page iframe

Le code est le suivant :

Copier le code Le code est le suivant :

$('#objId', parent.document);

Terminé...

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

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

Copier après la connexion

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

Copier le code Le code est le suivant :

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

Obtenez l'élément dont l'ID est "testId" en fonction du nom iframe

Copier le code Le code est le suivant :

$(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 contenues 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>

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

Copier après la connexion

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

Copier le code Le code est le suivant :

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

Accédez à la page iframe avec le nom d'ID 'koyoz' dans index.html, obtenez l'objet avec le nom d'ID 'test' dans cette page iframe 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 :

Copier le code Le code est le suivant :

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

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

Recueillez quelques exemples sur Internet :

Utiliser jQuery pour obtenir la valeur d'un élément de la fenêtre parent dans l'IFRAME ne peut être réalisé qu'en combinant la méthode DOM et la méthode jquery

1. Opérez dans la fenêtre parent et sélectionnez tous les boutons radio dans l'IFRAME

Copier le code Le code est le suivant :

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

2. Opérez dans IFRAME et sélectionnez tous les boutons radio dans la fenêtre parent

Copier le code Le code est le suivant :

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

Si la fenêtre parent souhaite récupérer l'Iframe dans l'IFrame, ajoutez simplement un cadre enfant, tel que :

Copier le code Le code est le suivant :

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

J'espère que cet article sera utile à tous ceux qui programment jQuery.