Home > Article > Web Front-end > js implementation code to determine whether elements in iframe exist

js implementation code to determine whether elements in iframe exist

高洛峰Original: 2017-01-12 11:00:481384browse

This article will introduce you to js to determine whether there is code for an element in an iframe. Friends who need to know more can enter it for reference.

1. Pure original js implementation method, the code is as follows:

<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. The current popular jquery implementation method, the code is as follows:

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

The above code determines whether the element whose css is 1-grid-row-cell exists in the iframe with the ID of iframepage.
Attachment

Jquery methods to obtain elements in iframe
Get parent page elements in iframe subpages

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

Display The content of the body element in the iframe

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

2. Use JS or jQuery to access the iframe within the page, compatible with IE/FF
Note: Pages within the frame It cannot cross domain!
Suppose there are two pages under the same domain.
index.html file contains an 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 content:

<!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. Execute JS in index.html to access directly:

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

Access the iframe page with the ID name 'koyoz' in index.html, obtain the object with the ID name 'test' in this iframe page, and set its color to Red.
This code has been tested and can support IE/firefox.
2. Use jQuery to access in index.html:

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

The effect of this code is the same as that of direct JS access. Due to the help of the jQuery framework, the code is shorter.
In addition, some netizens provided the following examples:
Use jQuery in To obtain the value of an element of the parent window in IFRAME, we have to use the combination of DOM method and jquery method.

1. Select all radio buttons in the IFRAME in the parent window

$(window.frames["iframe1"].document).find("input:radio"). attr("checked","true");
2. Select all radio buttons in the parent window in the IFRAME

$(window.parent.document).find("input:radio ").attr("checked","true");
If the parent window wants to get the Iframe in the IFrame, just add a frames child, such as:

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

More js to determine whether elements in iframe exist For articles related to implementation code, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js to prevent web pages from being nested by iframe frames and the differences between several location.hrefsNext article：js to prevent web pages from being nested by iframe frames and the differences between several location.hrefs

See more

js implementation code to determine whether elements in iframe exist

Related articles