頁面嵌入iframe關於父子傳參呼叫

2022-07-21 17:36:22 字數 2764 閱讀 9764

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.子頁面通...