实用框架(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 AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
React-native桥接Android原生开发详解
Jan 17 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
详解微信小程序支付流程与梳理
Jul 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
一个查看session内容的函数
2006/10/09 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Javascript Memoizer浅析
2014/10/16 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
python getopt详解及简单实例
2016/12/30 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
怎样声明接口
2014/09/19 面试题
模范家庭事迹材料
2014/02/10 职场文书
动员大会主持词
2014/03/20 职场文书
小学运动会口号
2014/06/07 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
烟台的海导游词
2015/02/02 职场文书
汽车车尾标语大全
2015/08/11 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫