实用框架(iframe)操作代码

常用代码：

<iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0"
	scrolling="no" frameborder="0"
	width="350" height="270"></iframe>

<iframe src="http://www.jb51.net/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";
}

赞 (0)

相关推荐

  • iframe子页面与父页面在同域或不同域下的js通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html 复制代码 代码如下: <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say()

  • JS操作iframe里的dom(实例讲解)

    直接赋值如下代码测试即可明白: 1.html: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l

  • js控制iframe的高度/宽度让其自适应内容

    复制代码 代码如下: <mce:script language= "Javascript "><!-- window.onload=function() { parent.document.all("iframe1").style.height = document.body.scrollHeight; parent.document.all("iframe1").style.width = document.body.scro

  • js取得html iframe中的元素和变量值

    上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知: 不能用$(document).ready()方法,而是要用$("#iframeId").load()方法,待iframe加载完成,才能取得 取iframe中的js变量值: document.frames['x'].y 这样便可以. 哎,很简单的问题,搞了很长时间,不应该啊!

  • 禁止iframe页面的所有js脚本如alert及弹出窗口等

    今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗

  • js操作iframe父子窗体示例

    父窗体获取iframe window.iframeId iframe获取父窗口 window.parent parent.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&qu

  • 实用框架(iframe)操作代码

    常用代码: <iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0" scrolling="no" frameborder="0" width="350" height="270"></iframe> <iframe s

  • JavaScript框架(iframe)操作总结

    框架编程概述 一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象.链接对象.图片对象等是类似的,不同的是,这

  • 同域jQuery(跨)iframe操作DOM(示例代码)

    frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. 复制代码 代码如下: <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe>

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • laravel框架的缓存操作代码实例

    laravel为不同的缓存系统提供了统一的API.缓存配置位于config/cache.php.Laravel目前支持主流的缓存后端有Memcached和Redis等. 主要方法: cache::put() cache::get() cache::add() cache::pull() cache::forever() cache::forget() cahce::has() 系统默认是使用文件缓存,其缓存文件储存的位置位于storage/framework/cahce/date 设置缓存 语法

  • 同域jQuery(跨)iframe操作DOM(实例讲解)

    frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. 复制代码 代码如下: <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe>

  • CI框架AR操作(数组形式)实现插入多条sql数据的方法

    本文实例讲述了CI框架AR操作实现插入多条sql数据的方法.分享给大家供大家参考,具体如下: 如果你不使用AR的话,你可以这样做: INSERT INTO TABLE (FIELDS) VALUES ('1','2'),('3','4'); $this->db->query($sql); 个人还是喜欢CI的AR操作,老版本(2.0一下)应该没有插入多条数据的操作,新版本可以用: $this->db->insert_batch(); 如下案例: $data = array( arra

  • Zend Framework框架路由机制代码分析

    本文分析了Zend Framework框架路由机制代码.分享给大家供大家参考,具体如下: 在框架中,有关路由的调用关系为: 1.apache的mod_rewrite模块把请求路由到框架的启动脚本,一般是index.php: 2.前端控制器Zend_Controller_Front通过dispatch函数进行请求分发: 3.路由器Zend_Controller_Router_Rewrite通过route函数处理路由,对路由器中已有的路由规则,按照加入顺序的逆序(类似于栈,后进先出)对每个route

  • 一款简单实用的php操作mysql数据库类

    本文实例讲述了一款简单实用的php操作mysql数据库类.分享给大家供大家参考.具体如下: 复制代码 代码如下: /* 本款数据库连接类,他会自动加载sql防注入功能,过滤一些敏感的sql查询关键词,同时还可以增加判断字段 show table status的性质与show table类 获取数据库所有表名等.*/ @ini_set('mysql.trace_mode','off'); class mysql {  public $dblink;  public $pconnect;  priv

  • Js 刷新框架页的代码

    先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> frame &l

随机推荐