Home Web Front-end JS Tutorial How to trigger parent window element event in iframe

How to trigger parent window element event in iframe

Apr 26, 2018 am 10:31 AM
iframe window trigger

This time I will show you how iframe can trigger the parent window element event , what are the precautions for iframe to trigger the parent window element event, the following is a practical case, let’s take a look take a look.

For example, the parent window defines an event.

top:

$(dom1).bind('topEvent', function(){});
Copy after login

So how do the elements in the iframe trigger the event of the parent window dom1? Is that so?

$(dom1, parent.
document
).trigger('topEvent');
Copy after login

It seems correct, but it is actually misleading.

Because the jquery object of the parent window and the jquery object in the iframe are actually two objects (functions), the jquery in the iframe will not trigger another jquery Object defined events. Unless you define it in the iframe like this:

iframe:

self.$ = parent.$;
Copy after login

So the solution is very simple:

parent.$(dom1,parent.doucment).trigger('topEvent');
Copy after login

Just call the parent jquery to execute the event .

It is said that iframe should no longer need to import jquery files. It can just share the same jquery with the parent window. This is very environmentally friendly.

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:

Tab tab scroll navigation switching implementation (with code)

jQuery is the most concise implementation of the tab option Switch

The above is the detailed content of How to trigger parent window element event in iframe. 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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

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 do I crop an IFrame in HTML? How do I crop an IFrame in HTML? Aug 29, 2023 pm 04:33 PM

Inline frames are called iframes in HTML. A label specifies a rectangular area within the content where the browser can display different documents with scroll bars and borders. To embed another document within the current HTML document, use inline frames. A reference to an element can be specified using the HTMLiframe name attribute. In JavaScript, references to elements are also made using the name attribute. An iframe is essentially used to display a web page within the currently displayed web page. The URL of the document containing the iframe is specified using the "src" attribute. Syntax The following is the syntax of HTML <iframesrc="URL"title="d

How to set Google Chrome to open a new window every time How to set Google Chrome to open a new window every time Mar 06, 2024 pm 06:19 PM

How to set Google Chrome to open a new window every time? Vicious users like to use Google Chrome for work or study. This browser is safe, fast, and convenient. Different users have different preferences for using browsers. Some users like to open Google Chrome as a new window to facilitate quick searches. , so how to set it up. Next, the editor will bring you a tutorial on setting up a new window every time you open Google Chrome. Friends who are interested can come and learn it. Tutorial on setting up a new window every time Google Chrome opens 1. Double-click Google Chrome on your computer desktop to open it, then click on the [three dots] icon in the upper right corner. 2. Find the [Settings] option and enter the page (as shown in the picture). 3. Go to Google Chrome

How to use physical gestures to trigger fun on-screen FaceTime effects How to use physical gestures to trigger fun on-screen FaceTime effects Oct 12, 2023 pm 11:49 PM

In iOS17 and iPadOS17, Apple introduced Message-like FaceTime reactions on iPhone and iPad. Instead of selecting icons from a menu, you can trigger them with physical gestures during a FaceTime call. When you make a FaceTime video call on an iPhone running iOS 17 or an iPad running iPadOS 17, you can trigger screen effects such as hearts, balloons, confetti, fireworks, etc. The visual effects will fill the display in your FaceTime call video. Sometimes spectacular for others to watch. You are hands-free and can trigger these reactions using only physical gestures. For example, a thumbs up

Why does iframe load slowly? Why does iframe load slowly? Aug 24, 2023 pm 05:51 PM

The reasons for slow loading of iframes mainly include network delay, long resource loading time, loading order, caching mechanism and security policy. Detailed introduction: 1. Network delay. When the browser loads a web page containing an iframe, it needs to send a request to the server to obtain the content in the iframe. If the network delay is high, the time to obtain the content will increase, resulting in slow loading of the iframe. ; 2. When the resource loading time is long, the size of the resource is large or the server response time is long, the loading speed will be more obviously slower; 3. Loading sequence, etc.

What does data-id in iframe mean? What does data-id in iframe mean? Aug 28, 2023 pm 02:25 PM

The data-id in an iframe refers to a custom attribute used in HTML tags to store the identifier of a specific element. By using the data-id attribute, you can add a unique identifier to the iframe element so that it can be manipulated and accessed in JavaScript. The naming of the data-id attribute can be customized according to specific needs, but some naming conventions are usually followed to ensure its uniqueness and readability. The data-id attribute can also be used to identify and manipulate a specific iframe.

Ways to Inspire Reaction Effects in FaceTime on Mac Ways to Inspire Reaction Effects in FaceTime on Mac Oct 10, 2023 pm 06:09 PM

In macOS Sonoma, Apple introduced message-like reactions for FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on a Mac running macOS Sonoma or later, you can trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display on the FaceTime call window. You can trigger these layer screen effects via the green FaceTime menu bar item, which includes a mini webcam view and buttons to trigger reactions, or you can go hands-free and trigger the same reactions using just physical gestures. For example, a thumbs up triggers a like, two

What technology can replace iframe What technology can replace iframe Aug 24, 2023 pm 01:53 PM

Technologies that can replace iframes include Ajax, JavaScript libraries or frameworks, Web component technologies, front-end routing, and server-side rendering. Detailed introduction: 1. Ajax is a technology used to create dynamic web pages. It can realize asynchronous update of the page by exchanging data with the server in the background without refreshing the entire page. Using Ajax can load and display content more flexibly, and there is no need to use iframe to embed other pages; 2. JavaScript library or framework , such as React and so on.

What are the loading events of iframe? What are the loading events of iframe? Aug 28, 2023 pm 01:55 PM

The loading events of iframe include onload event, onreadystatechange event, onbeforeunload event, onerror event, onabort event, etc. Detailed description: 1. onload event, specifying the JavaScript code to be executed after loading the iframe; 2. onreadystatechange event, specifying the JavaScript code to be executed when the iframe state changes, etc.

See all articles