Of Stack

jQuery to obtain the elements in iframe commonly used method details

  • 2020-12-05 17:05:52
  • OfStack

This paper analyzes the common methods of jQuery to obtain elements in iframe. To share for your reference, the details are as follows:

jquery Several methods to obtain elements in iframe:

Get the parent page element on the iframe child page

The code is as follows: 

$('#objId', parent.document);

Fix...

Get the elements of the iframe child page on the parent page: 


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

Displays the contents of the body element in iframe. 

$("#testId", document.frames("iframename").document).html();

According to iframename, where ID is the "testId" element 

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

Use JS or jQuery to access iframe within the page, compatible with IE/FF

Note: Pages within the framework are not cross-domain!

Let's say I have two pages, in the same field.

index.html contains 1 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> Page page </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.ofstack.com</div>
</body>
</html>

1. Perform JS direct access on ES59en.html: 

document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'

By visiting ID's iframe page named 'koyoz' on index.html, get the object of ID 'test' on this iframe page and set its color to red.

This code has been tested and can support IE/firefox.

2. Access via jQuery in ES80en.html: 

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

The effect of this code is the same as JS direct access, but the code is even shorter with the aid of the jQuery framework.

Collect 1 examples from the Web:

Using jQuery to get the value of an element of the parent window in IFRAME has to be achieved by combining DOM method with jquery method

1. Select all radio buttons in 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 IFRAME 
$(window.parent.document).find("input:radio").attr("checked","true");

If the parent window wants to get Iframe in IFrame, add one more frames child, such as: 
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

I hope this article has been helpful for jQuery programming.

Related articles: