js將iframe中控件的值傳到主頁面控件中的實(shí)現(xiàn)方法
現(xiàn)在來看一下代碼的實(shí)現(xiàn),首先來看一個(gè)主界面的代碼
<html>
<head>
<script type="text/javascript">
function GetData(data)
{
alert(data);
document.getElementById("id1").value=data;
}
</script>
</head>
<body>
<div>
<input id="id1" type="text" value="11" />
</div>
<div>
<iframe id="frameid" src="b.html">
</iframe>
</div>
</body>
</html>
可以看到在主頁面定義一個(gè)JavaScript函數(shù)實(shí)現(xiàn),將傳入的data參數(shù),賦值給id為id1的input 文本控件。
下面來看一個(gè)嵌入的b.html頁面代碼
<script type="text/javascript">
function OnTest()
{
var data=document.getElementById("test").value;
parent.GetData(data);
}
</script>
<div>
<input id="test" type="text" value="將此值傳到主頁面控件中" />
<button onclick="OnTest()">test</button>
</div>
嵌入頁面中主要通過一個(gè)按鈕事件,將此頁面中一個(gè)input文本控件中的值取出,然后通過parent.GetData(data)調(diào)用主頁面的函數(shù)進(jìn)行操作即可。

這是未點(diǎn)擊按鈕前的效果,現(xiàn)在點(diǎn)擊按鈕查看效果。

這樣就實(shí)現(xiàn)了傳值的效果
- iframe子頁面與父頁面在同域或不同域下的js通信
- iframe子父頁面調(diào)用js函數(shù)示例
- JS中Iframe之間傳值及子頁面與父頁面應(yīng)用
- js防止頁面被iframe調(diào)用的方法
- jsp頁面iframe高度自適應(yīng)的js代碼
- 禁止iframe頁面的所有js腳本如alert及彈出窗口等
- 用js+iframe形成頁面的一種遮罩效果的具體實(shí)現(xiàn)
- Jsp中解決session過期跳轉(zhuǎn)到登陸頁面并跳出iframe框架的方法
- js iframe網(wǎng)站后臺(tái)左右收縮型頁面腳本
- JS是否可以跨文件同時(shí)控制多個(gè)iframe頁面的應(yīng)用技巧
- js中iframe調(diào)用父頁面的方法
相關(guān)文章
JavaScript多種濾鏡算法實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了JavaScript多種濾鏡算法實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實(shí)例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05Javascript中字符串replace方法的第二個(gè)參數(shù)探究
當(dāng)我們要把一段字符串中的某些指定字符替換掉,第一時(shí)間想到的就是replace方法,他的用法很簡單,W3school上講的清晰易懂。網(wǎng)上有關(guān)replace的文章也有很多了,那么這篇這里主要聊聊它的第二個(gè)參數(shù),下面來一起看看,注意閱讀本文需要對(duì)replace方法有一定了解。2016-12-12原生JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11javascript實(shí)現(xiàn)blob加密視頻源地址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)blob加密視頻源地址的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08javascript跟隨滾動(dòng)條滾動(dòng)的層(浮動(dòng)AD效果)
javascript跟隨滾動(dòng)條滾動(dòng)的層(浮動(dòng)AD效果)...2007-08-08