iframe实用操作锦集
更新时间：2014年04月22日 17:33:14 作者：
这篇文章主要介绍了有关iframe的实用操作，包括高度、传递数据等等，感兴趣的朋友可以参考下
iframe高度设置为子页面高度
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自适应于父页面
//需要使用Jquery
$(window).resize(function () {
var webheight = document.body.clientHeight - X; //X是需要减去的高度量，例如顶部导航的高度
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
$(window).load(function () {
var webheight = document.body.clientHeight - 105;
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
父子页面间传递元素
父页面获取子页面中的数据，JS代码：
//根据iframe的id获取对象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=i1.document.getElementById("t1").value
子页面获取父页面中的数据，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";
复制代码 代码如下:
//需要使用Jquery
$(document).ready(function () {
parent.document.getElementById("ifPage").style.height = document.body.scrollHeight + "px";
});
iframe高度自适应于父页面
复制代码 代码如下:
//需要使用Jquery
$(window).resize(function () {
var webheight = document.body.clientHeight - X; //X是需要减去的高度量，例如顶部导航的高度
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
$(window).load(function () {
var webheight = document.body.clientHeight - 105;
$("#ifPage").attr("style", "height:" + webheight + "px;");
});
父子页面间传递元素
父页面获取子页面中的数据，JS代码：
复制代码 代码如下:
//根据iframe的id获取对象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=i1.document.getElementById("t1").value
子页面获取父页面中的数据，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";
相关文章
JS标签云效果，在鼠标的作用下会自动转动，整体上围绕成一个圆形，各个标签之间无需Div代码，直接文字+链接的形式，有多少就显示多少，JavaScript会自动调整显示数量，让视觉效果最佳。2015-10-10
setinterval()与clearInterval()JS函数的调用方法
这篇文章主要介绍了setinterval()与clearInterval()JS函数的调用方法,实例分析了setinterval()与clearInterval()的语法结构及使用技巧,需要的朋友可以参考下2015-01-01
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时，效率问题必须重视。下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
下面小编就为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
JSDoc 是一种 JavaScript 文档注释规范,它允许开发者为 JavaScript 代码添加注释,下面就跟随小编一起来学习一下它的具体使用吧2024-02-02
这篇文章主要介绍了JavaScript如何实现烟花绽放动画效果，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了.NET微信公众号开发之创建自定义菜单的相关资料,需要的朋友可以参考下2015-07-07
promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 promise 的实现过程吧2023-04-04
这篇文章主要为大家详细介绍了原生JS实现鼠标滑动撒爱心特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了用webAPI实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论