iframe實(shí)用操作錦集
更新時(shí)間：2014年04月22日 17:33:14 作者：
這篇文章主要介紹了有關(guān)iframe的實(shí)用操作，包括高度、傳遞數(shù)據(jù)等等，感興趣的朋友可以參考下
iframe高度設(shè)置為子頁(yè)面高度
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自適應(yīng)于父頁(yè)面
//需要使用Jquery
$(window).resize(function () {
var webheight = document.body.clientHeight - X; //X是需要減去的高度量，例如頂部導(dǎo)航的高度
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
$(window).load(function () {
var webheight = document.body.clientHeight - 105;
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
父子頁(yè)面間傳遞元素
父頁(yè)面獲取子頁(yè)面中的數(shù)據(jù)，JS代碼：
//根據(jù)iframe的id獲取對(duì)象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value
子頁(yè)面獲取父頁(yè)面中的數(shù)據(jù)，JS代碼：
var val = parent.document.getElementById("txt1");
子頁(yè)面與子頁(yè)面間的傳遞，JS代碼：
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;
刷新父頁(yè)面
function parentReload() { window.parent.location.reload();}
重新加載子頁(yè)面
iframe.Attributes[ "Src"] = "ItemTQEditorPage.aspx";
復(fù)制代碼 代碼如下:
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自適應(yīng)于父頁(yè)面
復(fù)制代碼 代碼如下:
//需要使用Jquery
$(window).resize(function () {
var webheight = document.body.clientHeight - X; //X是需要減去的高度量，例如頂部導(dǎo)航的高度
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
$(window).load(function () {
var webheight = document.body.clientHeight - 105;
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
父子頁(yè)面間傳遞元素
父頁(yè)面獲取子頁(yè)面中的數(shù)據(jù)，JS代碼：
復(fù)制代碼 代碼如下:
//根據(jù)iframe的id獲取對(duì)象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value
子頁(yè)面獲取父頁(yè)面中的數(shù)據(jù)，JS代碼：
復(fù)制代碼 代碼如下:
var val = parent.document.getElementById("txt1");
子頁(yè)面與子頁(yè)面間的傳遞，JS代碼：
復(fù)制代碼 代碼如下:
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;
刷新父頁(yè)面
復(fù)制代碼 代碼如下:
function parentReload() { window.parent.location.reload();}
重新加載子頁(yè)面
復(fù)制代碼 代碼如下:
iframe.Attributes[ "Src"] = "ItemTQEditorPage.aspx";
相關(guān)文章
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向?qū)ο蠡A(chǔ)與this指向問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說明
寫在最前面的最先執(zhí)行，Body的onload事件要在頁(yè)面加載完后才執(zhí)行。2010-06-06
原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果
輪播效果是老生常談的話題，今天小編通過實(shí)例代碼給大家分享原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2018-09-09
js實(shí)現(xiàn)加載頁(yè)面就自動(dòng)觸發(fā)超鏈接的示例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)加載頁(yè)面就自動(dòng)觸發(fā)超鏈接的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
js中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
在javascript中，null＞=0 為真，null==0卻為假，null的值詳解
這篇文章主要介紹了在javascript中，null＞=0 為真，null==0卻為假，null的值詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript網(wǎng)絡(luò)請(qǐng)求工具庫(kù)axios使用實(shí)例探索
這篇文章主要為大家介紹了JavaScript網(wǎng)絡(luò)請(qǐng)求工具庫(kù)axios使用實(shí)例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
Webpack中l(wèi)oader打包各種文件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Webpack中l(wèi)oader打包各種文件的相關(guān)資料，其中包括處理css文件、less文件、scss文件、url地址以及ES6高級(jí)語(yǔ)法的方法，需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于微信小程序npm引入vant-weapp的踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程
下面小編就為大家分享一篇mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12