js之iframe子頁面與父頁面通訊

2022-08-02 21:57:12 字數 1527 閱讀 6458

原生js寫法

父頁面訪問子頁面

var children = document.getelementbyid("childframe").contentwindow ;//方式一進入到子頁面,「childframe」為子頁面iframe的id。

varchildren  =window.myframe; //方式二進入到子頁面。「myframe」為子頁面iframe 的name

1.children.childmethod();//父頁面訪問子頁面的方法

「childframe」為子頁面的id,childmethod()為子頁面的方法。

2.children.document.getelementbyid('button1').value=」呼叫結束」;//父頁面訪問子頁面的button1元素

1.//在這裡的子頁面之定義了

name

屬性,沒有

id屬性

2.//在這裡的子頁面定義了

id屬性

子頁面訪問父頁面

window.parent.say();

window.parent.document.getelementbyid("button").value="呼叫結束

";jquery寫法

父頁面呼叫子頁面:

格式:$("#iframe

的id")[0].contentwindow().iframe(); 

例項:$("#ifm")[0].contentwindow().iclick(); // ifm 為子

標籤 id; iclick

為子頁面

js 方法

格式:$("#iframe

的id").contents().find("#iframe

中的控制項

id").click(); 

例項:$("#ifm").contents().find("#ibtnok").click(); // ifm

為 標籤

id; ibtnok

為子頁面按鈕

id子頁面獲取父頁面方法與變數

$(window.parent.fun());

$(window.parent.hello);  //獲取父元素的hello變數

子頁面獲取父頁面元素:

格式:$("#父頁面元素

id" , parent.document);

例項:$("#pbtnok" , window.parent.document).click(); //獲取父元素的id為pbtnok的元素

js之iframe子頁面與父頁面通訊

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結,通訊方式也不同。父頁面parent.html 子頁面child.html 方法呼叫 父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.pa...

js之iframe子頁面與父頁面通訊

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結,通訊方式也不同。父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.parentmethod 獲取到頁面的window.document物件...

js之iframe子頁面與父頁面通訊

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結,通訊方式也不同。父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.parentmethod 獲取到頁面的window.document物件...