iframe相關操作

2022-08-21 00:03:08 字數 1359 閱讀 6133



下面為要呼叫的iframe標籤，也可以通過類名來設定寬高


我是父頁面的內容,點選iframe中的按鈕，觸發父頁面中的事件，改變 #1


子級iframe會改變我的內容


點我呼叫子iframe中的方法


我是父頁面的內容




我是ifr的內容


我是iframe1


點我改變父頁面內容 #1->#1#1
原生js

父調子

元素：window.frames[iframe的name屬性值];

方法：子調父

元素：方法：window.parent.父頁面方法;

原生方法還是使用id比較靠譜

jquery

父調子

元素：$(iframe選擇器).contents().find(iframe中元素選擇器);

// 查詢iframe中的元素


console.log($(".ifr").contents().find(".title").html())
方法：$(iframe選擇器)[0].contentwindow.子頁面方法名;

// 呼叫子iframe中的方法


parent.frames["ifr"].window.childmethods1();


$(".ifr")[0].contentwindow.childmethods1();
子調父

元素：

// 獲取父元素中元素的內容


console.log($(".p-btn1", window.parent.document).html())


console.log(window.parent.$(".p-btn1").html())


parent.$(window.parent.document).find('.change11').html("gggg")
方法：window.parent.父頁面方法;

// 點選執行父頁面中定義的方法


parent.fun()


window.parent.fun()


// 點選觸發父頁面的事件


parent.$(window.parent.document).find('.change1').click()

iframe的相關操作

答 document.getelementbyid iframe的id contentwindow.location.reload true 2 iframe檔案的內容怎麼和其使用檔案進行通訊 答 通過postmessage事件進行傳送 然後addeventlistener監聽message進行獲取...

iframe操作記要

使用uur框架時,主頁上iframe結構如下 index my97datepicker,沒使用這個日曆控制項時沒有這個iframe frameleft左側選單 frameright右側內容 當在frameright中有uur框架彈出視窗時,會在index加乙個div,裡面會有個iframe,結構如下...

Iframe的高階操作

這樣的操作需要提供兩個頁面，乙個頁面是iframe所在頁面 頁面名稱 parent.htm 另乙個頁面是iframe屬性src指向頁面 頁面名稱 child.htm parent.htm，裡dom 1 iframe id iid name iname src frame.htm scrolling ...