iframe实用操作锦集


Posted in Javascript onApril 22, 2014

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";
Javascript 相关文章推荐
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 #Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 #Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 #Javascript
Area 区域实现post提交数据的js写法
Apr 22 #Javascript
div失去焦点事件实现思路
Apr 22 #Javascript
js隐式全局变量造成的bug示例代码
Apr 22 #Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 #Javascript
You might like
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python采用raw_input读取输入值的方法
2014/08/18 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
JDO的含义
2012/11/17 面试题
自荐信结尾
2013/10/27 职场文书
实习自我鉴定范文
2013/10/30 职场文书
公司财务工作总结的自我评价
2013/11/23 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
车间核算员岗位职责
2014/07/01 职场文书
结婚堵门保证书
2015/05/08 职场文书
花田少年史观后感
2015/06/16 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
cypress测试本地web应用
2022/06/01 Javascript