Home >Web Front-end >JS Tutorial >jQuery gets element value in iframe

jQuery gets element value in iframe

php中世界最好的语言Original: 2018-04-24 14:52:583270browse

This time I will bring you jQueryGet the element value in iframe, what are the precautions for jQuery to get the element value in iframe, the following is a practical case, let's take a look.

Several ways to get elements in iframe with jquery:

Get parent page elements in iframe sub-page

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

Get it 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.

$("#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!

Assume 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>
<p id="test">www.jb51.net</p>
</body>
</html>

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

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

Access the ID named 'koyoz' in index.html iframe page, and obtain the object with the ID 'test' in this iframe page, and set its color to red.

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

2. Use jQuery to access index.html:

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

The effect of this code is the same as direct JS access. Because 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 IFRAME can only be achieved by combining the DOM method and the jquery method

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

$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

2. Operate in the IFRAME to select all radio buttons in the parent window

$(window.parent.document).find("input:radio").attr("checked","true");

Parent window If you want to get the Iframe in the IFrame, just add a frames child, such as:

$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

jQuery gets element value in iframe

Related articles