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

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

WBOY

Release： 2016-05-16 15:19:46

Original

1297 people have browsed it

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

Copy after login

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>

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

Copy after login

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.