实用框架(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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
详解Vue slot插槽
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
再说下636单管机
2021/03/02 无线电
聊天室php&amp;mysql(一)
2006/10/09 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
node读写Excel操作实例分析
2019/11/06 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python内存动态分配过程详解
2019/07/15 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python实现双人五子棋(终端版)
2020/12/30 Python
英国假发网站:Hothair
2018/02/23 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
2014年中秋寄语
2014/08/11 职场文书
小学家长学校培训材料
2014/08/24 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
2019银行竞聘书
2019/06/21 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers