jQuery gets iframe element

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:

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

Get it done...

Get the elements of the iframe subpage on 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:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>页面首页</title>


<iframe></iframe>

iframe.html Content:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>iframe.html</title>


<p>www.jb51.net</p>

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 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 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");

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

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

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");

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!

Recommended reading:

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!