实用框架(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 读取元素的CSS信息的代码
Feb 07 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
简单实现node.js图片上传
Dec 18 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
微信小程序日历效果
2018/12/29 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
学校2014年度工作总结
2014/12/06 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
运动会广播稿20字
2015/08/19 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
《比的意义》教学反思
2016/02/18 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle