实用框架(iframe)操作代码


Posted in Javascript onOctober 23, 2014

常用代码:

<iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0"
	scrolling="no" frameborder="0"
	width="350" height="270"></iframe>

<iframe src="https://3water.com/plugins/like.php?href=YOUR_URL"
    scrolling="no" frameborder="0"
    style="border:none; width:450px; height:80px"></iframe>

javascript访问frame,iframe框架和href的定向

一.frame

1.父框架到子框架的引用

知道了上述原理,从父框架引用子框架变的非常容易,即:

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架,根据引用的框架实际就是window对象的性质,可以这样实现:

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架,以此类推,可以实现多层框架的引用。

2.子框架到父框架的引用

每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,则window.parent还表示该框架本身。

3.兄弟框架间的引用

如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相引用,例如一个页面包括2个子框架:

<frameset rows=”50%,50%”>
  <frame src=”1.html” name=”frame1″ />
  <frame src=”2.html” name=”frame2″ />
</frameset>

在frame1中可以使用如下语句来引用frame2:

self.parent.frames["frame2"];

4.不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,例如:

self.parent.frames["childName"].frames["targetFrameName"];

5.对顶层框架的引用

和parent属性类似,window对象还有一个top属性。它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架,例如:

//判断本框架是否为顶层框架

if(self==top){

    //dosomething

}

if (window.top!=window.self) {

    // dosomething

}

改变框架的载入页面

对框架的引用就是对window对象的引用,利用window对象的location属性,可以改变框架的导航,例如:

window.frames[0].location = "1.html";

引用其他框架内的JavaScript变量和函数

在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:

<script language=”JavaScript” type=”text/javascript”>
<!?
function hello(){
  alert(“hello,ajax!”);
}
window.hello();
//?>
</script>

二.iframe

严格上应该是使用frames数组,和 document.all。

<iframe id=myiframe src=”about:<input type=checkbox name=mycheckbox value=mycheckbox>”></iframe>

<input type=button onclick=”alert(document.frames.myiframe.document.all.mycheckbox.checked)”>

三.href

1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);
2.假设链接中同时存 在 href 与 onclick,如果想 让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉;
3.如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要 是 #,这可以防止不必要的页面跳动;
4.如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;
5.在按住Shift键的情况下会有所区别。
6.今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。
7.尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

如:

<a href=”javascript:void(0)” onclick=”linkChangePwd()”>更改密码</a>

调整框架的高度

window.onload = function() {

 parent.document.getElementById('customiframe').style.height = document.body.clientHeight + "px";

}
Javascript 相关文章推荐
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue-router源码之history类的浅析
May 21 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
form.submit()不能提交表单的原因分析
Oct 23 #Javascript
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js单词形式的运算符
2014/05/06 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
python中的sort方法使用详解
2014/07/25 Python
Python字符串详细介绍
2015/05/09 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python实现批量改文件名称的方法
2015/05/25 Python
python实现简单神经网络算法
2018/03/10 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python全局变量引用与修改过程解析
2020/01/07 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
教师自荐信
2013/12/10 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
财务工作检讨书
2014/10/29 职场文书