jQuery gets iframe element-JS Tutorial-php.cn

jQuery gets iframe element

php中世界最好的语言

Release： 2018-04-26 10:33:28

Original

5590 people have browsed it

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

Several methods for jquery to obtain elements in iframe:

Get parent page elements in iframe sub-pages

The code is as follows:

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

Copy after login

Get it done...

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

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

Copy after login

Display the content of the body element in the iframe.

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

Copy after login

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

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

Copy after login

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>

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

Copy after login

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

document.getElementById(&#39;koyoz&#39;).contentWindow.document.getElementById(&#39;test&#39;).style.color=&#39;red&#39;

Copy after login

Access the ID named 'koyoz' in index.html iframe page, and obtain the object with 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(&#39;color&#39;,&#39;red&#39;);

Copy after login

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 has to be achieved by combining the DOM method and the jquery method

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

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

Copy after login

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

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

Copy after login

The parent window wants to get the Iframe in the IFrame , just add a frame sublevel, such as:

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

Copy after login

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’s simplest implementation of tab option switching

jQuery Ajax implementation of table data title sorting

The above is the detailed content of jQuery gets iframe element. For more information, please follow other related articles on the PHP Chinese website!