1、首先來說一下iframe是幹什麼用的
iframe是html標籤,作用是文件中的文件,或者浮動的框架(frame)。iframe元素會建立包含另外乙個文件的內聯框架(即行內框架),通俗點說就是在乙個頁面中通過寫iframe標籤來嵌入另乙個頁面
2、**的實現
首先是父元素
>iframe父子頁面互調
title
>
<
script
src=""
>
script
>
head
>
<
body
>
<
h2>子頁面呼叫postmessage,父頁面通過監聽來獲取子頁面的資料
h2>
<
div
style
="width:400px; height: 200px;"
>
<
iframe
src="son1.html"
frameborder
="0"
style
="width:100%; height: 100%;"
>
iframe
>
div>
<
div
id="output"
>
div>
<
h2>子頁面呼叫父頁面的一些方法
h2>
<
script
>
window.addeventlistener(
'message',
function
(e) `;
}},
false
);
function
fun()
script
>
body
>
html
>
下面是子元素的**
>子頁面
title
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
style
="width:300px; height: 180px; border:1px solid #000"
>
請輸入一些值:
<
input
type
="text"
id="text1"
/>
<
button
onclick
="sendmessagetoparent()"
>設定
button
>
<
button
onclick
="click()"
>
點選呼叫父元素的方法
button
>
div>
<
script
>
function
sendmessagetoparent() );) top代表父元素的最頂層
window.top.postmessage();
}//呼叫父元素的方法
$(function
() )
script
>
body
>
html
>
3、將**複製下來 開啟就ok了
iframe父子頁面傳值
一,js操作父子頁面 1 父頁面操作子頁面 iframe的name.window.say 引數 呼叫子頁面的方法 iframe的name.document.getelementbyid button value 引數 呼叫子頁面的屬性 1 子頁面操作父頁面 parent.say parent.win...
iframe父子頁面傳值
iframe是乙個可以直接引用網頁鏈結的框架,在寫頁面邏輯時,往往會遇到子頁面邏輯和父頁面邏輯的溝通。iframe的父子網頁可以通過相互呼叫對方的方法,來達到邏輯互動的效果 1.父呼叫子的方法 iframe 0 contentwindow.sonmethod 2.父獲取子中的元素 iframe co...
iframe父子頁面呼叫方法及傳參
在用 iframe的時候,不得不對子頁面或父頁面進行操作,或者傳遞引數,這時就需要用獨特的方法實現了,實現辦法也簡單 案例中,父級頁面通過 iframe獲取子頁面的引數,並通過子頁面呼叫父頁面的方法,將彈框關閉,實現父子頁面方法和引數共享。注意點 1.父頁面寫好 子頁面呼叫父頁面的方法 2.子頁面通...