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

伊谢尔伦
Libérer: 2017-06-19 13:19:14
original
2472 Les gens l'ont consulté

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

$('#objId', parent.document);
// 搞定...
Copier après la connexion

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();
Copier après la connexion

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

$(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 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>
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.koyoz.com</div>  
</body>  
</html>
Copier après la connexion

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

document.getElementById(&#39;koyoz&#39;).contentWindow.document.getElementById
(&#39;test&#39;).style.color=&#39;red&#39;
Copier après la connexion

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;);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal