如何實現 iframe 子頁面和父頁面聯調?

2022-09-04 20:39:13 字數 686 閱讀 9932

目錄通過 chrome 開發者工具編輯 iframe src 的方式來達到實時預覽,然後過載 iframe 來看最新效果

為已有系統擴充套件乙個 iframe 子頁面,該子頁面風格比較獨特,又需要讓子頁面在系統和諧融入時,用來除錯可以節省大量時間,比從頭搭框架要來的快得多

就比如我有乙個藍色調的後台系統,然後需要新增個地圖操作子頁面,而客戶指定底圖需要是衛星圖,衛星圖本身顏色就偏綠,將該子頁面嵌入到系統中會感到很突兀

顯然我們不能光顧著寫單頁面看效果,需要找到合適方案來讓系統框架和單頁面兩者和諧共處

以下是我初步想出來的兩種方式:

2.自己動手豐衣足食,自己寫個框架,將子頁面嵌入進去來除錯?

有一天突發奇想,iframe 的關鍵點是 src,那我們直接通過開發者工具改線上系統 dom 裡的 iframe src 位址是不是就直接達到了線上配置選單位址的效果?

改完東西後,當然也不需要我們再重新整理頁面,再改 iframe 位址來檢視啦

注:不要使用瀏覽器重新整理,重新整理了就得再改一次 iframe 的 src,很不方便...

iframe子頁面操作父頁面

最近經常用到iframe,用的最多的就是在子頁面中操作父頁面的方法或變數等,總結了用到的幾種方法,如下 var htmlurl window.parent.main frame attr src jquery 獲取父頁面的iframe的src屬性值 其實獲取父頁面的乙個引數或方法有很多種的寫法,現在...

iframe子頁面和父頁面如何傳值通訊

業務場景,在index.html的主頁面中,我們希望巢狀子頁面,這時候就涉及到父子頁面的通訊問題。以下的都是在同域的基礎上的 1.相互獲取dom元素 1.1 在父頁面獲取子頁面的dom元素 document.getelementbyid iframe id contentwindow.documen...

iframe子頁面與父頁面通訊

父頁面html iframe.html頁面 關鍵點 父親訪問孩子頁面 window framename 返回iframe頁面的window物件 js中定義的方法和變數都做為window物件的屬性存在 iframe訪問父親頁面 parent 代表父親的window物件 html和iframe的跨域通訊...