文档章节

HTML中IFrame父窗口与子窗口相互操作

暮光之夜降
 暮光之夜降
发布于 2016/06/28 18:03
字数 1026
阅读 17
收藏 0
点赞 0
评论 0

一、Iframe

//&&&&&&&&&&&&&&&&&&&&公共方法开始&&&&&&&&&&&&&&&

//父对象得到子窗口的值

//ObjectID是窗口标识,ContentID是元素ID

function GetValue(ObjectID,ContentID)

{

       varIsIE = (navigator.appName == 'Microsoft Internet Explorer')

                     if(IsIE)

                     {//如果是IE         

                            alert(document.frames(ObjectID).document.getElementById(ContentID).innerHTML);                              

                     }

                     else

                     {//如果是FF

                             alert(document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML);

                                   //FF下不支持innerText; 下面是解决方法                     

                                   //if(document.all){

                                   //  alert(document.getElementById('div1').innerText);

                                   //}else{

                                   //  alert(document.getElementById('div1').textContent);

                                   //}

                     }    

}

 

//父对象向子窗口赋值

//ObjectID是窗口标识,ContentID是元素ID

function SetValue(ObjectID,ContentID)

{

var IsIE = (navigator.appName == 'MicrosoftInternet Explorer')

              if(IsIE)

              {//如果是IE         

                     document.frames(ObjectID).document.getElementById(ContentID).innerHTML="我是IE下通过父窗口赋值过来的";                            

              }

              else

              {//如果是FF

                      document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML="我是FF下通过父窗口赋值过来的";                   

              }    

}

//&&&&&&&&&&&&&&&&&&&&公共方法结束&&&&&&&&&&&&&&&

 

 

      1.父窗口对子窗口操作

 

刷新:

     document.getElementById("IframeID").src=document.getElementById("IframeID").src+"?_="+Math.random();

上面这种方法有时需要对“src”属性处理一下。

 

取值:

//父窗口取子窗口的值

       GetValue("Iframe1","IframeDiv");

 

赋值:

//父窗口设置窗口元素的值;

       SetValue("Iframe1","IframeDiv");      

 

   2.子窗口操作父窗口

 

              刷新:

          (1)window.parent.location.href=window.parent.location.href;  

          (2)window.parent.location.reload();

              (3)、大家可以补充

 

    取值:

alert(window.parent.document.getElementById("IframeDiv").innerHTML);    

 

赋值:

window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值";

 

关闭:

window.parent.opener=null;//如果不加这句,会提示关闭询问窗口;

window.parent.close();

二、window.open

1.父窗口对子窗口操作

打开:

var win=null;

win=window.open("Open.html","win","width=200,height=200");

 

最大化:

//窗口最大化

function SonMaximize()

{

       if(win&&win.open&&!win.closed)

       {

              win.moveTo(-4,-4);

              win.resizeTo(screen.availWidth+8,screen.availHeight+8);

       }else{

              alert('还没有打开窗口或已经关闭');

       }

}

 

最小化:

//窗口最小化

function SonMinimize()

{

       if(win&&win.open&&!win.closed)

       {

              win.resizeTo(0,0);

              win.moveTo(0,window.screen.width);

       }else{

       alert('还没有打开窗口或已经关闭');

       }    

}

 

 

 

关闭:

//关闭窗口

function CloseSon()

{

       if(win&&win.open&&!win.closed)

       {

              win.opener=null;

              win.close()

       }else{

              alert('还没有打开窗口或已关闭') ;

       }

}

 

刷新:

//刷新

function RefreshSon()

{

       if(win&&win.open&&!win.closed)

       {

              win.location.reload();

              win.focus();

       }else{

              alert('窗口还没有打开或已关闭');

       }

}

 

查看窗口大小:

function ViewSonSize()

{

       if(win&&win.open&&!win.closed)

       {

              alert(win.document.body.clientWidth+'*'+win.document.body.clientHeight);

              win.focus();

       }else

       {

              alert('还没有打开窗口或者已关闭');

       }    

}

 

取值:

alert(window.document.getElementById("OpenDiv").innerHTML);

 

赋值:

win.document.getElementById("OpenDiv").innerHTML="我是从父窗口中传过来的值";

 

2.子窗口操作窗口

 

刷新:

window.opener.location.reload();

       //下面这种方法也可以

       //window.parent.location.href=window.parent.location.href;

 

 

 

 

 

关闭本窗口:

//关闭本窗口

function CloseWindow()

{     //window.opener.opener=null;

       window.close();

}

 

关闭父窗口:

//关闭父窗口

function CloseParent()

{     //火狐下不起作用,如果要想起作用。用下面的方法

     //firefox,在地址栏输入about:config      

       //找到dom.allow_scripts_to_close_windows这项并改为true

              varIsIE = (navigator.appName == 'Microsoft Internet Explorer')

              if(IsIE){//如果是IE            

                     window.opener.opener=null;

                     window.opener.close();

                     window.close();     

              }else{

                     alert("火狐不能直接关闭;需要以下设置1.firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true");

              }

      

}

 

取值:

alert(window.opener.document.getElementById("OpenDiv").innerHTML);     

 

赋值:

window.opener.document.getElementById("OpenDiv").innerHTML="我是从子窗口Open传过来的值";           

 

三、模态窗口篇

1.父窗口操作子窗口

父窗口JS代码:

varparValue="现在显示了父窗口中的变量值";

varhao="郝建卫";

functionShowDailog(PageHref,Title,Height,Width)

{

       //--------------left位置

       //screen.availHeight声明了显示浏览器的屏幕的可用宽度

       var dleft =(screen.availHeight-Height)/2;

       //--------------top位置

       var dtop =(screen.availWidth-Width)/2;

       //---------------

 

Var sRet=window.showModalDialog(PageHref,window,Title,"scrollbars=yes;resizable=no;help=no;status=no;center=yes;dialogTop=25;dialogLeft="+dleft +";dialogTop="+ dtop+";dialogHeight="+Height+"px;dialogWidth="+Width+"px;");

       //--------return

       if (sRet =="refresh")//这种是利用返回值来刷新父页面

       {

              window.Test="true";

              window.location.reload();            

              alert(window.Test);

       }

}

function  test()

{

       alert("模态窗口成功调用父窗口的方法");

}

2.模态窗口操作父窗口

varparentWin=window.dialogArguments; 

 

刷新:

       parentWin.location.reload(); 

 

取值:

alert(parentWin.document.getElementById("ShowModalDialogDiv").innerHTML)   //获取父窗口中的对象

 alert("我是从父窗口中得到的变量>>>"+parentWin.parValue);       //获取父窗口中的变量

 

调用父窗口JS方法:

parentWin.test();   //调用父窗口中的方法

 

赋值:

parentWin.document.getElementById("ShowModalDialogDiv").innerHTML="我是从子窗口ShowModalDialog传过来的值";      

 

关闭本窗口:

//关闭本窗口

functionCloseWindow()

{

       window.parent.close();

}

 

关闭父窗口:

//关闭父窗口

functionCloseModal()

{    

       var IsIE = (navigator.appName =='Microsoft Internet Explorer')

              if(IsIE){//如果是IE            

                     window.parent.parent.close();

                     //parentWin.opener=null;如果把上面的换成这行,不能关闭父窗口,

                     parentWin.close();

                     //window.parent.parent.parent.parent.close();这个只能关闭模态窗口本身目前只在IE6下测试

              }else{

                     alert("火狐不能直接关闭;需要以下设置1.firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true");

              }    

}

 

本文转载自:http://blog.csdn.net/xing_sky/article/details/8519520

共有 人打赏支持
暮光之夜降
粉丝 0
博文 3
码字总数 2011
作品 0
东城
使用JavaScript下进行iframe的DOM操作(考虑浏览器兼容性)

今天碰到一个浏览器兼容性的问题,是IE和Firefox下iframe DOM操作的差异。本文借IE和Firefox在iframe DOM操作的不同,进行分析说明JavaScript在DOM操作中两者的不同。 IE和Firefox对iframe ...

嗯哼9925 ⋅ 01/07 ⋅ 0

iframe 父窗口和子窗口相互的调用方法集锦

http://www.jb51.net/article/25629.htm 一、父窗口调用iframe子窗口方法 1、HTML语法: 2、父窗口调用子窗口:myFrame.window.functionName(); 3、子窗品调用父窗口:parent.functionName()...

lionkas ⋅ 2017/09/12 ⋅ 0

jquery、js调用iframe父窗口与子窗口元素的方法

$("iframe").contents().find("body").append("I'm in an iframe!"); $(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px"); $("#iframe1").contents().f......

zh119893 ⋅ 2014/05/18 ⋅ 0

解析Jquery取得iframe中元素的几种方法

DOM方法: 父窗口操作IFRAME: window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames[...

文文1 ⋅ 2015/03/26 ⋅ 0

HTML iframe 用法小总结

Iframe用法,下面是一个常规的列子 <iframe border=2 frameborder=0 width=500 height=500 marginheight=0 marginwidth=0 scrolling=no src="move-ad.html"></iframe> 其中: iframe用于设置文......

Mr韦淋 ⋅ 2014/11/17 ⋅ 0

jQuery控制IFRAME父窗口元素

DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["i...

疯狂的艺术家 ⋅ 2011/04/01 ⋅ 1

jsp 内嵌网页内容--iframe

ZZzzz~ may wind  src:文件的路径,既可是HTML文件,也可以是文本、ASP等;  width、height:"画中画"区域的宽与高;  scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项...

网页 ⋅ 2008/05/21 ⋅ 0

跨域问题解决方案

关于跨域名问题还是问题么,这方面的解决实践非常多,今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下 先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来...

有事没事 ⋅ 2014/03/13 ⋅ 0

“画中画”效果--谈IFRAME标签的使用

作者:秋实 文章来源:天极网页陶吧 纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

浏览器的同源限制解决方案

1.对于不同的二级域名中的cookie共享 php中的setcookie函数的第四个参数,只写一级域名即可,如: 2.网页中用iframe嵌入一个不同源的网页 不同源则双方无法拿到对方的dom,即下面的语句会报错...

码上有春天 ⋅ 2016/07/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构服务注册与发现

Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、决策竞选、...

明理萝 ⋅ 30分钟前 ⋅ 0

占位slot

一、为什么我们需要slot 假如我们有个需要,子组件中需要显示一段html内容,显示什么不是由子组件决定,而是由父组件传递什么决定,我们该怎么做 很挫的做法,我们使用组件间的数据传递 父组...

金于虎 ⋅ 30分钟前 ⋅ 0

Linux集群 NTP 时间同步

基于CentOS 7 规划 比如有2台机器 IP 主机名 说明 192.168.103.51 cdh51 本地NTP服务端 192.168.103.52 cdh52 本地NTP客户端 安装NTP服务 每台机器都安装ntp yum -y install ntp NTP服务端(...

囚兔 ⋅ 32分钟前 ⋅ 0

国际版链克口袋 获取方法

1 月16日,网心科技玩客云团队在官网发布了停止链克口袋转帐服务的通知。通知中表示迅雷将于1月25日在AppStore和官网,正式发布链克口袋新版本,新版本不支持迅雷及迅雷合作伙伴开发的应用场...

xiaogg ⋅ 33分钟前 ⋅ 0

Raft中Batching和pipelining到底是什么?

Raft supports batching and pipelining of log entries, and both are important for best performance. Many of the costs of request processing are amortized when multiple requests a......

黑客画家 ⋅ 34分钟前 ⋅ 0

Mybatis-Plus 之BaseMapper 方法详解

/** * Mapper 继承该接口后,无需编写 mapper.xml 文件,即可获得CRUD功能 * 这个 Mapper 支持 id 泛型 * @author hubin * @Date 2016-01-23 */public interface BaseMapper<T> ...

干干 ⋅ 34分钟前 ⋅ 0

JVM笔记9-Class类文件结构

摘要: 1.Class类文件结构   Class 文件是一组以 8 位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在 Class 文件之中,中间没有添加任何分隔符,这使得整个 Class 文件中...

传授知识的天使 ⋅ 38分钟前 ⋅ 0

MySQL数据库之sleep线程过长如何处理?

  什么是sleep线程?   sleep线程长时间保持可客户端与服务端的连接状态   导致sleep过多的原因:   使用太多持久连接(高并发系统中 不适合使用持久连接)   程序中 没有及时关闭MyS...

老男孩Linux培训 ⋅ 39分钟前 ⋅ 0

转发和重定向的区别

转发在服务器端完成的;重定向是在客户端完成的 转发的速度快;重定向速度慢 转发的是同一次请求;重定向是两次不同请求 转发不会执行转发后的代码;重定向会执行重定向之后的代码 转发地址栏...

冯莉莉莉莉 ⋅ 39分钟前 ⋅ 0

go语言实现http proxy的关键一步

go语言自带包ReverseProxy 实现了proxy的功能。 但我希望proxy进程能够在代理的同时,完整的把请求和请求体记录在日志里。 仅使用ReverseProxy 包的话,uri记录没问题,但body只能被读取一次...

xuanzilie ⋅ 45分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部