实用框架(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 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
js评分组件使用详解
Jun 06 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
快速解决element的autofocus失效问题
Sep 08 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
Ajax PHP分页演示
2007/01/02 PHP
PHP 柱状图实现代码
2009/12/04 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
js选择器全面解析
2016/06/27 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
五年级音乐教学反思
2014/02/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
法人委托书的范本格式
2014/09/11 职场文书
爱心募捐通知范文
2015/04/27 职场文书
小人国观后感
2015/06/11 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB