首頁 web前端 js教程 iframe怎麼實作觸發父視窗元素事件

iframe怎麼實作觸發父視窗元素事件

Apr 26, 2018 am 10:31 AM
iframe 視窗 觸發

這次帶給大家iframe怎麼實現觸發父視窗元素事件,iframe實作觸發父視窗元素事件的注意事項有哪些,下面就是實戰案例,一起來看一下。

例如父視窗定義了一個事件。

top:

$(dom1).bind('topEvent', function(){});
登入後複製

那麼iframe裡面的元素怎麼觸發父視窗dom1的事件呢?這樣嗎?

$(dom1, parent.
document
).trigger('topEvent');
登入後複製

看似正確,實則誤導人。

因為父視窗的jquery物件與iframe裡面的jquery物件實際為兩個物件(function),iframe裡面的jquery並不會觸發另一個jquery物件定義的事件。除非你在iframe這樣定義了:

iframe:

self.$ = parent.$;
登入後複製

所以解決的方法很簡單:

parent.$(dom1,parent.doucment).trigger('topEvent');
登入後複製

呼叫父jquery執行該事件就行了。

話說iframe應該不必再引進jquery檔案的,與父視窗共用一個jquery就行了,這樣很環保。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Tab選項卡捲動導航切換實作(附程式碼)

##jQuery最簡潔實作tab選項切換

以上是iframe怎麼實作觸發父視窗元素事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
我該如何裁剪HTML中的IFrame? 我該如何裁剪HTML中的IFrame? Aug 29, 2023 pm 04:33 PM

內嵌框架在HTML中稱為iframe。標籤指定內容中的一個矩形區域,瀏覽器可以在其中顯示帶有捲軸和邊框的不同文件。若要在目前HTML文檔中嵌入另一個文檔,請使用內嵌框架。可以使用HTMLiframe名稱屬性指定元素的參考。在JavaScript中,對元素的參考也是使用name屬性進行的。 iframe本質上用於在目前顯示的網頁中顯示網頁。包含iframe的文件的URL使用「src」屬性指定。語法以下是HTML的語法<iframesrc="URL"title="d

谷歌瀏覽器怎麼設定每次開啟都是新的窗口 谷歌瀏覽器怎麼設定每次開啟都是新的窗口 Mar 06, 2024 pm 06:19 PM

谷歌瀏覽器怎麼設定每次開啟都是新的視窗?狠毒用戶喜歡使用谷歌瀏覽器辦公或學習,這款瀏覽器具有安全、快速、便捷的特點,不同的用戶使用瀏覽器的喜好不同,一些用戶喜歡打開谷歌瀏覽器就是新的標窗口,方便快速搜索,那麼如何設定呢。接下來小編就帶給大家谷歌瀏覽器每次開啟都是新的視窗設定教程,有興趣的朋友來學習一下。谷歌瀏覽器每次開啟都是新的視窗設定教學1、將電腦桌面上的Google瀏覽器雙擊開啟之後,點選右上角的【三個點】的圖示位置進行點擊。 2.找到【設定】這個選項進入到頁面中(如圖)。 3.進入到谷歌瀏

如何使用實體手勢觸發有趣的螢幕 FaceTime 效果 如何使用實體手勢觸發有趣的螢幕 FaceTime 效果 Oct 12, 2023 pm 11:49 PM

在iOS17和iPadOS17中,Apple在iPhone和iPad上引入了類似Message的FaceTime反應。除了不是從選單中選擇圖示之外,您還可以在FaceTime通話中透過實體手勢觸發它們。當您在運行iOS17的iPhone或運行iPadOS17的iPad上進行FaceTime視訊通話時,您可以觸發心形、氣球、五彩紙屑、煙火等屏幕效果,視覺效果會在您的FaceTime通話視頻中充斥顯示屏,有時非常壯觀,供其他人觀看。您可以解放雙手,只需使用物理手勢即可觸發這些反應。例如,一個豎起大拇趾

iframe為什麼加載慢 iframe為什麼加載慢 Aug 24, 2023 pm 05:51 PM

iframe載入慢的原因主要包括網路延遲、資源載入時間長、載入順序、快取機制以及安全性策略等。詳細介紹:1、網路延遲,當瀏覽器載入一個包含iframe的網頁時,需要發送請求到伺服器取得iframe中的內容,若網路延遲較高,那麼取得內容的時間就會增加,從而導致iframe載入慢;2.資源載入時間長,資源的大小較大或伺服器回應時間較長時,載入速度會更明顯變慢;3、載入順序等等。

iframe中的data-id是什麼意思 iframe中的data-id是什麼意思 Aug 28, 2023 pm 02:25 PM

iframe中的data-id是指在HTML標籤中使用的自訂屬性,用於儲存特定元素的識別碼。透過使用data-id屬性,可以為iframe元素新增一個唯一的標識符,以便在JavaScript中對其進行操作和存取。 data-id屬性的命名可以根據特定的需求進行自定義,但通常會遵循一些命名規範,以確保其唯一性和易讀性。 data-id屬性也可以用來識別和操作特定的iframe。

激發Mac上FaceTime中的反應效果的方法 激發Mac上FaceTime中的反應效果的方法 Oct 10, 2023 pm 06:09 PM

在macOSSonoma中,Apple為FaceTime引入了類似訊息的反應。不過,它們不是由文字觸發,而是可以透過手勢觸發。當您在運行macOSSonoma或更高版本的Mac上進行FaceTime視訊通話時,您可以觸發心形、氣球、五彩紙屑、煙火等螢幕效果,這些效果會淹沒FaceTime通話視窗上的顯示器。您可以透過綠色的FaceTime選單欄項目觸發這些圖層螢幕效果,其中包括迷你網路攝影機視圖和觸發反應的按鈕,或者您可以解放雙手並僅使用實體手勢觸發相同的反應。例如,一個豎起大拇指觸發一個贊,兩個

什麼技術可以取代iframe 什麼技術可以取代iframe Aug 24, 2023 pm 01:53 PM

可以取代iframe的技術有Ajax、JavaScript庫或框架、Web元件技術、前端路由和伺服器端渲染等。詳細介紹:1、Ajax是一種用來建立動態網頁的技術。它可以透過在後台與伺服器進行資料交換,實現頁面的非同步更新,而無需刷新整個頁面,使用Ajax可以更靈活地載入和顯示內容,不再需要使用iframe來嵌入其他頁面;2、JavaScript庫或框架,如React等等。

iframe有哪些載入事件 iframe有哪些載入事件 Aug 28, 2023 pm 01:55 PM

iframe的載入事件有onload事件、onreadystatechange事件、onbeforeunload事件、onerror事件、onabort事件等。詳細說明:1、onload事件,指定載入iframe完成後要執行的JavaScript程式碼;2、onreadystatechange事件,指定當iframe狀態變更時要執行的JavaScript程式碼等等。

See all articles