search

Home >Web Front-end >JS Tutorial >Detailed explanation of common methods of jQuery to obtain elements in iframe_jquery

Detailed explanation of common methods of jQuery to obtain elements in iframe_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:461292browse

This article analyzes the common methods of jQuery to obtain elements in iframe. Share it with everyone for your reference, the details are as follows:

Several ways to get elements in iframe with jquery:

Get the parent page element in the iframe subpage

The code is as follows:

Copy code The code is as follows:
$('#objId', parent.document);

Done...

Get the elements of the iframe subpage in the parent page: 

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()

Display the content of the body element in the iframe.

Copy code The code is as follows:
$("#testId", document.frames("iframename").document) .html();

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

Copy code The code is as follows:
$(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.

The

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.jb51.net</div>
</body>
</html>

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

Copy code The code is as follows:
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. Access with jQuery in index.html:

Copy code The code is as follows:
$("#koyoz").contents().find("#test" ).css('color','red');

The effect of this code is the same as direct access through JS. With the help of the jQuery framework, the code is shorter.

Collect some examples from the Internet:

Using jQuery to obtain the value of an element of the parent window in the IFRAME can only be achieved by combining the DOM method and the jquery method

1. Operate in the parent window and select all radio buttons in the IFRAME

Copy code The code is as follows:
$(window.frames["iframe1"].document).find("input :radio").attr("checked","true");

2. Operate in IFRAME and select all radio buttons in the parent window
Copy code The code is as follows:
$(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:
Copy code The code is as follows:
$(window.frames["iframe1"].frames["iframe2"]. document).find("input:radio").attr("checked","true");

I hope this article will be helpful to everyone in jQuery programming.

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：Easily achieve jquery accordion effect_javascript skillsNext article：Easily achieve jquery accordion effect_javascript skills

Related articles

See more