Home > Article > Web Front-end > Detailed explanation of the instance method of Jquery to obtain all levels of elements, content or ID of iframe

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

伊谢尔伦Original: 2017-06-19 13:19:142405browse

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

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

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

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

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

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>

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>

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;

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

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!

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：Detailed explanation of the difference between size() length in jqueryNext article：Detailed explanation of the difference between size() length in jquery

See more

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

Related articles