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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
Vue底层实现原理总结
Feb 17 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 eval()函数定义和用法
2016/06/21 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
家长对孩子的评语
2014/04/18 职场文书
高考励志标语
2014/06/05 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
倡议书格式及范文
2015/04/29 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Go语言空白表示符_的实例用法
2021/07/04 Golang
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers