Detailed explanation of steps to operate iframe using jquery
This time I will give you a detailed explanation of the steps to use jquery to operate iframe. What are the precautions for using jquery to operate iframe? . The following is a practical case, let's take a look.
Let’s first take a look at the help file of the object contents() in JQUERY
contents()
Overview
Find all child nodes (including text nodes) inside the matching element . If the element is an iframe, find the document content
Example
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
jQuery
$("p").contents().not("[nodeType=1]").wrap("<b/>");结果: <p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>
Description:
Add some content to an empty frame
HTML
<iframe src="/index-blank.html" width="300" height="100"></iframe>
jQuery
$("iframe").contents().find("body") .append("I'm in an iframe!");
Remove the iframe border frameborder="0"
1 There are two ifame
<iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe>
jQuery changes in the leftiframe Mainiframe's src code:
$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")
2 If there is an ifame with the ID of mainiframe in the content
<iframe id="mainifame"...></ifame>
ifame contains a someID
<p id="someID">you want to get this content</p>
Get the content of someID
$("#mainiframe").contents().find("someID").html()html 或者 $("#mainiframe").contains().find("someID").text()值
2 As shown above
jQuery in leftiframe operates the content of mainiframe someID
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()
Jquery gets the tag with id xuan in the parent window to which the iframe belongs
$(window.parent.document).find("#xuan").html(x);//
//js creates elements and appends them to the dom operation problem in the element in the Iframe of the parent element:
Directly call the method in the parent window in the iframe: Assume that the parent window has an add method
self.parent.add();
==================================== ==============================
The difference between IE and Firefox on iframe document objects
In IE6 and IE7, we can use document.frames[ID].document to access the document object in the iframe sub-window, but this is a writing method that does not comply with W3C standards and is also a unique method under IE. Under Firefox But it cannot be used. Firefox uses the document.getElementById(ID).contentDocument method that complies with the W3C standard. When I wrote the example today, I tested it through IE8. IE8 also uses the
document method that complies with the W3C standard. getElementById(ID).contentDocument method. So we can write a function that is common under IE and Firefox to get the iframe
document object—getIFrameDOM:
functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}
P.S.: If we want to get the iframe’s window object, instead of For document objects, you can use the method document.getElementById(ID).contentWindow. In this way, we can use the window object in the child window, such as the function in the child window.
Use the function of the parent window in the child window to obtain the document object of the parent window
In the child window, we can obtain the window object of the parent window through parent. If we are in the parent window There is a function called getIFrameDOM, which we can call through parent.getIFrameDOM. Similarly, we can use parent.document to access the document object of the parent window in the child window.
Using JavaScriptExample of DOM operation of iframe
First, we introduce two iframe child windows in the parent window, with IDs wIframeA and wIframeB, and the addresses are respectively : a.html, b.html.
The main HTML code of the parent window is as follows:
<p id="pHello" style="margin:10px auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数,来替换哦~</p> <iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" src="b.html" scrolling="no" frameborder="0"></iframe>
In sub-windows A and B, I put a P with the ID hello to facilitate our DOM operation demonstration. The main HTML of sub-windows A and B The code is as follows:
<p id="hello">Hello World!</p>
1. In the iframe, the parent window operates the DOM of the child window
The parent window and the child window have been built, so that we can use the following iframeA( ) function to change the background color of sub-window A to red:
functioniframeA(){//给子窗口A改变ID为hello的背景色 vara=getIFrameDOM("wIframeA"); a.getElementById('hello').style. background ="red"; } functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数 returndocument.getElementById(id).contentDocument||document.frames[id].document; }
2. In the iframe, the sub-window operates the DOM of the parent window
In the sub-window, we can conveniently To perform parent window DOM operations, you only need to add the method of the Yige parent object before the DOM operation. For example: in the child window B above, we can use the following code to add the parent window with the ID "pHello" Replace the content:
-------------------
3. In the iframe, sub-window A operates on sub-window B. DOM
Since the child window can operate the window object and document object of the parent window, the child window can also operate the DOM of another child window~ Broken Bridge Canxue can directly use parent in child window B to directly call the parent The getIFrameDOM function in the window obtains the document object of sub-window A, so it is very simple to modify the content of sub-window A, such as the following code:
vara=parent.getIFrameDOM("wIframeA");
===================================================================================
一个iframe高度自动变化的问题搞了我半天,网上找了下资料,不是很好,结合了一下jquery(版本1.3.2),4行代码即可,完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:
function heightSet(thisFrame){ if($.browser.mozilla || $.browser.msie){ bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight; }else{ bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight; //这行可代替上一行,这样heightSet 函数的参数 可以省略了 //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight; } document.getElementById("thisFrameId").height=bodyHeight; } <iframe id="mainFrame" name="mainFrame" frameborder="0" scrolling="no" src=""onload="heightSet(this)"></iframe>
引用
this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID
引用
都在说一个异步的问题,如果你ajax用得特别多,但又不想每次都去设置,那动态改变iframe肯定达不到你的代码清洁要求,没办法,要么你就脱离iframe。我只能说说一般处理方式,毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:
Js代码
parent.window.heightSet();
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
jquery从数组移除选中值步骤详解
The above is the detailed content of Detailed explanation of steps to operate iframe using jquery. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

WeChat is one of the social media platforms in China that continuously launches new versions to provide a better user experience. Upgrading WeChat to the latest version is very important to keep in touch with family and colleagues, to stay in touch with friends, and to keep abreast of the latest developments. 1. Understand the features and improvements of the latest version. It is very important to understand the features and improvements of the latest version before upgrading WeChat. For performance improvements and bug fixes, you can learn about the various new features brought by the new version by checking the update notes on the WeChat official website or app store. 2. Check the current WeChat version We need to check the WeChat version currently installed on the mobile phone before upgrading WeChat. Click to open the WeChat application "Me" and then select the menu "About" where you can see the current WeChat version number. 3. Open the app

When logging into iTunesStore using AppleID, this error saying "This AppleID has not been used in iTunesStore" may be thrown on the screen. There are no error messages to worry about, you can fix them by following these solution sets. Fix 1 – Change Shipping Address The main reason why this prompt appears in iTunes Store is that you don’t have the correct address in your AppleID profile. Step 1 – First, open iPhone Settings on your iPhone. Step 2 – AppleID should be on top of all other settings. So, open it. Step 3 – Once there, open the “Payment & Shipping” option. Step 4 – Verify your access using Face ID. step

Having issues with the Shazam app on iPhone? Shazam helps you find songs by listening to them. However, if Shazam isn't working properly or doesn't recognize the song, you'll have to troubleshoot it manually. Repairing the Shazam app won't take long. So, without wasting any more time, follow the steps below to resolve issues with Shazam app. Fix 1 – Disable Bold Text Feature Bold text on iPhone may be the reason why Shazam is not working properly. Step 1 – You can only do this from your iPhone settings. So, open it. Step 2 – Next, open the “Display & Brightness” settings there. Step 3 – If you find that “Bold Text” is enabled

Windows 11, as the latest operating system launched by Microsoft, is deeply loved by users. In the process of using Windows 11, sometimes we need to obtain system administrator rights in order to perform some operations that require permissions. Next, we will introduce in detail the steps to obtain system administrator rights in Windows 11. The first step is to click "Start Menu". You can see the Windows icon in the lower left corner. Click the icon to open the "Start Menu". In the second step, find and click "

Screenshot feature not working on your iPhone? Taking a screenshot is very easy as you just need to hold down the Volume Up button and the Power button at the same time to grab your phone screen. However, there are other ways to capture frames on the device. Fix 1 – Using Assistive Touch Take a screenshot using the Assistive Touch feature. Step 1 – Go to your phone settings. Step 2 – Next, tap to open Accessibility settings. Step 3 – Open Touch settings. Step 4 – Next, open the Assistive Touch settings. Step 5 – Turn on Assistive Touch on your phone. Step 6 – Open “Customize Top Menu” to access it. Step 7 – Now you just need to link any of these functions to your screen capture. So click on the first

Is the clock app missing from your phone? The date and time will still appear on your iPhone's status bar. However, without the Clock app, you won’t be able to use world clock, stopwatch, alarm clock, and many other features. Therefore, fixing missing clock app should be at the top of your to-do list. These solutions can help you resolve this issue. Fix 1 – Place the Clock App If you mistakenly removed the Clock app from your home screen, you can put the Clock app back in its place. Step 1 – Unlock your iPhone and start swiping to the left until you reach the App Library page. Step 2 – Next, search for “clock” in the search box. Step 3 – When you see “Clock” below in the search results, press and hold it and

If you don't have control over the zoom level in Safari, getting things done can be tricky. So if Safari looks zoomed out, that might be a problem for you. Here are a few ways you can fix this minor zoom issue in Safari. 1. Cursor magnification: Select "Display" > "Cursor magnification" in the Safari menu bar. This will make the cursor more visible on the screen, making it easier to control. 2. Move the mouse: This may sound simple, but sometimes just moving the mouse to another location on the screen may automatically return it to normal size. 3. Use Keyboard Shortcuts Fix 1 – Reset Zoom Level You can control the zoom level directly from the Safari browser. Step 1 – When you are in Safari
