Table of Contents
jquery从数组移除选中值步骤详解" >jquery从数组移除选中值步骤详解
Home Web Front-end JS Tutorial Detailed explanation of steps to operate iframe using jquery

Detailed explanation of steps to operate iframe using jquery

Apr 24, 2018 pm 02:41 PM
iframe jquery step

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>
Copy after login

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>
Copy after login

Description:
Add some content to an empty frame

HTML

<iframe 
src="/index-blank.html" width="300" height="100"></iframe>
Copy after login

jQuery

$("iframe").contents().find("body")
.append("I'm in an iframe!");
Copy after login

Remove the iframe border frameborder="0"

1 There are two ifame

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe>
Copy after login

jQuery changes in the leftiframe Mainiframe's src code:

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")
Copy after login

2 If there is an ifame with the ID of mainiframe in the content

<iframe id="mainifame"...></ifame>
Copy after login

ifame contains a someID

<p id="someID">you want to get this content</p>
Copy after login

Get the content of someID

$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值
Copy after login

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()
Copy after login

Jquery gets the tag with id xuan in the parent window to which the iframe belongs

$(window.parent.document).find("#xuan").html(x);//
Copy after login

//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;}
Copy after login

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>
Copy after login

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>
Copy after login

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;
}
Copy after login

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");
Copy after login

===================================================================================

一个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>
Copy after login

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题,如果你ajax用得特别多,但又不想每次都去设置,那动态改变iframe肯定达不到你的代码清洁要求,没办法,要么你就脱离iframe。我只能说说一般处理方式,毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码

parent.window.heightSet();
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jquery遍历筛选数组与json对象的方法合集

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to make Google Maps the default map in iPhone How to make Google Maps the default map in iPhone Apr 17, 2024 pm 07:34 PM

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

Steps to upgrade to the latest version of WeChat (Easily master the upgrade method to the latest version of WeChat) Steps to upgrade to the latest version of WeChat (Easily master the upgrade method to the latest version of WeChat) Jun 01, 2024 pm 10:24 PM

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

This Apple ID is not yet in use in the iTunes Store: Fix This Apple ID is not yet in use in the iTunes Store: Fix Jun 10, 2024 pm 05:42 PM

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

Shazam app not working in iPhone: Fix Shazam app not working in iPhone: Fix Jun 08, 2024 pm 12:36 PM

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

Detailed explanation of the steps to obtain Win11 system administrator permissions Detailed explanation of the steps to obtain Win11 system administrator permissions Mar 08, 2024 pm 09:09 PM

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 "

iPhone screenshots not working: How to fix it iPhone screenshots not working: How to fix it May 03, 2024 pm 09:16 PM

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

Clock app missing in iPhone: How to fix it Clock app missing in iPhone: How to fix it May 03, 2024 pm 09:19 PM

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

Safari zoom issue on iPhone: Here's the fix Safari zoom issue on iPhone: Here's the fix Apr 20, 2024 am 08:08 AM

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

See all articles