iframe實(shí)用操作錦集
更新時間：2014年04月22日 17:33:14 作者：
這篇文章主要介紹了有關(guān)iframe的實(shí)用操作，包括高度、傳遞數(shù)據(jù)等等，感興趣的朋友可以參考下
iframe高度設(shè)置為子頁面高度
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自適應(yīng)于父頁面
//需要使用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;");
});
父子頁面間傳遞元素
父頁面獲取子頁面中的數(shù)據(jù)，JS代碼：
//根據(jù)iframe的id獲取對象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value
子頁面獲取父頁面中的數(shù)據(jù)，JS代碼：
var val = parent.document.getElementById("txt1");
子頁面與子頁面間的傳遞，JS代碼：
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;
刷新父頁面
function parentReload() { window.parent.location.reload();}
重新加載子頁面
iframe.Attributes[ "Src"] = "ItemTQEditorPage.aspx";
復(fù)制代碼 代碼如下:
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自適應(yīng)于父頁面
復(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;");
});
父子頁面間傳遞元素
父頁面獲取子頁面中的數(shù)據(jù)，JS代碼：
復(fù)制代碼 代碼如下:
//根據(jù)iframe的id獲取對象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value
子頁面獲取父頁面中的數(shù)據(jù)，JS代碼：
復(fù)制代碼 代碼如下:
var val = parent.document.getElementById("txt1");
子頁面與子頁面間的傳遞，JS代碼：
復(fù)制代碼 代碼如下:
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;
刷新父頁面
復(fù)制代碼 代碼如下:
function parentReload() { window.parent.location.reload();}
重新加載子頁面
復(fù)制代碼 代碼如下:
iframe.Attributes[ "Src"] = "ItemTQEditorPage.aspx";
相關(guān)文章
javascript實(shí)現(xiàn)動態(tài)標(biāo)簽云
JS標(biāo)簽云效果，在鼠標(biāo)的作用下會自動轉(zhuǎn)動，整體上圍繞成一個圓形，各個標(biāo)簽之間無需Div代碼，直接文字+鏈接的形式，有多少就顯示多少，JavaScript會自動調(diào)整顯示數(shù)量，讓視覺效果最佳。2015-10-10
setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
這篇文章主要介紹了setinterval()與clearInterval()JS函數(shù)的調(diào)用方法,實(shí)例分析了setinterval()與clearInterval()的語法結(jié)構(gòu)及使用技巧,需要的朋友可以參考下2015-01-01
JavaScript中for循環(huán)的幾種寫法與效率總結(jié)
每個接觸JS的開發(fā)人員都不可避免的與for循環(huán)打交道，畢竟這是遍歷必不可少的工具之一。然而當(dāng)循環(huán)次數(shù)比較大時，效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2024-02-02
JavaScript實(shí)現(xiàn)煙花綻放動畫效果
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)煙花綻放動畫效果，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
.NET微信公眾號開發(fā)之創(chuàng)建自定義菜單
這篇文章主要介紹了.NET微信公眾號開發(fā)之創(chuàng)建自定義菜單的相關(guān)資料,需要的朋友可以參考下2015-07-07
JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù)，解決了?js?處理異步時回調(diào)地獄的問題，大家應(yīng)該也不陌生了，今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04
原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了用webAPI實(shí)現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11