Detailed explanation of the instance method of Jquery to obtain all levels of elements, content or ID of iframe-JS Tutorial-php.cn

Detailed explanation of the instance method of Jquery to obtain all levels of elements, content or ID of iframe

伊谢尔伦

Release： 2017-06-19 13:19:14

Original

2462 people have browsed it

Get the elements of the parent page in the iframe sub-page
The code is as follows:

$(&#39;#objId&#39;, parent.document);
// 搞定...

Copy after login

Get the elements of the iframe sub-page in the parent page
The code is as follows:

$("#objid",document.frames(&#39;iframename&#39;).document)
$(document.getElementById(&#39;iframeId&#39;).contentWindow.document.body).html()
$("#testId", document.frames("iframename").document).html();

Copy after login

Get the element whose ID is "testId" based on iframename

$(window.frames["iframeName"].document).find("#testId").html()

Copy after login

Use JS or jQuery to access the iframe in the page, compatible with IE/FF
Note: Pages within the frame cannot cross domains!

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">www.koyoz.com</div>  
</body>  
</html>

Copy after login

1. Execute JS in index.html for direct access:
JavaScriptcode

document.getElementById(&#39;koyoz&#39;).contentWindow.document.getElementById
(&#39;test&#39;).style.color=&#39;red&#39;

Copy after login

pass Visit 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 The test passed and can support IE/firefox.

2. Use jQuery to access index.html:
JavaScript code

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

Copy after login

The effect of this code is the same as that of direct JS access Similarly, with the help of the jQuery framework, the code is shorter.

The above is the detailed content of Detailed explanation of the instance method of Jquery to obtain all levels of elements, content or ID of iframe. For more information, please follow other related articles on the PHP Chinese website!