实用框架(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 面向对象之命名空间
May 04 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
php源码的安装方法和实例
2019/09/26 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
JQuery插件开发示例代码
2013/11/06 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Python 装饰器深入理解
2017/03/16 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python模块WSGI使用详解
2018/02/02 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
毕业生医学检验求职信
2013/10/16 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
爱我中华演讲稿
2014/05/20 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
HttpClient实现表单提交上传文件
2022/08/14 Java/Android