js implementation code to determine whether elements in iframe exist-JS Tutorial-php.cn

js implementation code to determine whether elements in iframe exist

高洛峰

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

Original

1397 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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">m.sbmmt.com</div>
</body>
</html>

Copy after login

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!