js-Implementierungscode, um festzustellen, ob Elemente im Iframe vorhanden sind-js-Tutorial-php.cn

js-Implementierungscode, um festzustellen, ob Elemente im Iframe vorhanden sind

高洛峰

Freigeben： 2017-01-12 11:00:48

Original

1383 Leute haben es durchsucht

Dieser Artikel führt Sie in js ein, um festzustellen, ob das Element im Iframe vorhanden ist. Freunde, die mehr wissen müssen, können es als Referenz eingeben.

1. Die reine ursprüngliche js-Implementierungsmethode, der Code lautet wie folgt:

<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>

Nach dem Login kopieren

2. Die jetzt beliebte jquery-Implementierungsmethode lautet wie folgt :

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

Nach dem Login kopieren

Der obige Code bestimmt, ob das Element mit CSS von 1-Grid-Row-Celle im Iframe mit der ID von iframepage vorhanden ist.
Angehängt

Mehrere Methoden von Jquery zum Abrufen von Elementen im Iframe
Übergeordnete Seitenelemente in Iframe-Unterseiten abrufen

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

Nach dem Login kopieren

Den Inhalt des Body-Elements im Iframe anzeigen

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

Nach dem Login kopieren

2. Verwenden Sie JS oder jQuery, um auf den Iframe auf der Seite zuzugreifen, kompatibel mit IE /FF
Hinweis: Seiten innerhalb des Frames können nicht domänenübergreifend sein!
Angenommen, es gibt zwei Seiten unter derselben Domain.
Die Datei index.html enthält einen 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>

Nach dem Login kopieren

iframe.html-Inhalt:

<!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>

Nach dem Login kopieren

1. JS in index.html ausführen für direkten Zugriff:

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

Greifen Sie auf die Iframe-Seite mit dem ID-Namen „koyoz“ in index.html zu und rufen Sie die Iframe-Seite mit der ID ab Benennen Sie das Objekt „test“ und setzen Sie seine Farbe auf Rot.
Dieser Code wurde getestet und kann IE/Firefox unterstützen.
2. Zugriff mit jQuery in index.html:

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

Die Wirkung dieses Codes ist die gleiche wie die des direkten JS-Zugriffs. Aufgrund der Hilfe des jQuery-Frameworks ist der Code kürzer.
Außerdem haben einige Internetnutzer die folgenden Beispiele bereitgestellt:
JQuery verwenden in Um den Wert eines Elements des übergeordneten Fensters in IFRAME zu erhalten, müssen wir die Kombination aus DOM-Methode und JQuery-Methode verwenden.

1. Wählen Sie alle Optionsfelder im IFRAME im übergeordneten Fenster aus

$(window.frames["iframe1"].document).find("input:radio"). „checked“, „true“);
2. Wählen Sie alle Optionsfelder im übergeordneten Fenster im IFRAME aus

$(window.parent.document).find("input:radio").attr ("checked", "true");
Wenn das übergeordnete Fenster den Iframe im IFrame erhalten möchte, fügen Sie einfach einen untergeordneten Frame hinzu, z. B.:

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

Mehr js, um festzustellen, ob Elemente in iframe vorhanden sind. Für Artikel im Zusammenhang mit Implementierungscode, bitte beachten Sie die chinesische PHP-Website!