实用框架(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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
PHP实现图片简单上传
2006/10/09 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python测试人员需要掌握的知识
2018/02/08 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python 美化输出信息的实例
2018/10/15 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
如何查找网页漏洞
2016/06/22 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
施工安全汇报材料
2014/08/17 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
mysql sql常用语句大全
2022/06/21 MySQL