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:

0d8422d5a748d838d5911bbec5723448
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7页面首页6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
762b520465e72e0dbf3dd71a9b487789065276f04003e4622c4fe6b64f465b88
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

iframe.html Content:

0d8422d5a748d838d5911bbec5723448
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7iframe.html6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c3d3c408046ceece4c710c1da83f9948www.jb51.net94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!