suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Implementierungscode, um festzustellen, ob Elemente im Iframe vorhanden sind

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

高洛峰
高洛峰Original
2017-01-12 11:00:481388Durchsuche

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>

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

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

Den Inhalt des Body-Elements im Iframe anzeigen

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

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js, um zu verhindern, dass Webseiten durch Iframe-Frames verschachtelt werden, und die Unterschiede zwischen mehreren location.hrefsNächster Artikel：js, um zu verhindern, dass Webseiten durch Iframe-Frames verschachtelt werden, und die Unterschiede zwischen mehreren location.hrefs

In Verbindung stehende Artikel

Mehr sehen