`
uule
  • 浏览: 6351912 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

iframe总结 + window.open

阅读更多

从frame中跳出并转向:

parent.window.location.href = "<%=basePath%>package.do";

或top.window.location.href = "<%=basePath%>package.do";

 

 

<iframe name="myFrame" src="child.html"></iframe>

1、方法调用:

父窗口调用子窗口:myFrame.window.functionName();
子窗品调用父窗口:parent.functionName();

2、属性调用:
1、IE中使用方法:
父窗口调用子窗口:iframe_ID.iframe_document_object.object_attribute = attribute_value
例子:onClick="iframe_text.myH1.innerText='http://www.pint.com';"
子窗口调用父窗口:parent.parent_document_object.object_attribute = attribute_value
例子:onclick="parent.myH1.innerText='http://www.pint.com';"

2、Firefox中使用方法:
上面在IE下没有问题,但在firefox下不正常。在firefox下,应该是如下调用方法:
父窗口调用子窗口:window.frames["iframe_ID"].document.getElementById("iframe_document_object"­).object_attribute = attribute_value
例: window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.wonsoft.cn ";
子窗口调用父窗口:parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例: parent.document.getElementById("myH1").innerHTML = "http://wonsoft.cn ";

参考:http://keyknight.blog.163.com/blog/static/36637840200973101612654/

 

点击前页面:


分别点击后页面:



 

父窗口iframe.jsp:

<script>
  	function say() {
   		alert("I'm at parent.html");
   	} 

	function callChild()
	{      		
   		ifr.window.say();    //调用iframe中say方法
   		
   		//修改iframe中属性值
   		ifr.myH2.innerHTML = "Child H1 changed!";  //IE
   		//ifr.document.getElementById("myH2").innerHTML = "Child H1 changed!"; //IE下两种方法都可以
   		
   		//window.frames["ifr"].document.getElementById("myH2").innerHTML = "Child H1 changed in FireFox!" ; //FireFox
	}	    
</script>
  <body>
  	Parent:
  	<h1 id="myH1">Parent H1</h1> 
  	<input   type=button   value="调用child.html中的函数say()" onclick="callChild()"/>  
    <iframe id="ifr" name="ifr" src="child.jsp" scrolling="auto"></iframe>    
  </body>

 子窗口child.jsp:

<script type="text/javascript">      
	function say()   
	{   
        alert("I'm at child.html");   
	} 

	function callParent() {
   		parent.say();    //调用父窗口say方法
   		parent.myH1.innerHTML = "Parent H1 Changed!"; //IE
   		//parent.document.getElementById("myH1").innerHTML = "Parent H1 changed in FireFox!" ; //FireFox
   	} 
</script>    
  </head>
  
  <body>
    This is my JSP page. <br>
    <h1 id="myH2">Child H1</h1> 
    <input   type=button   value="调用parent.html中的say()函数"   onclick="callParent()">    
  </body>

 

自适应高度:

function iFrameHeight() { 		 
		//var subWeb = document.frames ? document.frames["ifr"].document : ifm.contentDocument;   
		var subWeb = document.frames ? document.frames["ifr"].document : ifm.contentWindow.document;   
		
		var ifm= document.getElementById("ifr");  
		if(ifm != null && subWeb != null) {
			//alert(subWeb.body.scrollHeight);
		   setTimeout(function(){ifm.height = subWeb.body.scrollHeight;},1000);
		   //需要使用延迟方法,否则第一次时不会自动适应高度
		   //不用延迟方法用alert()也可以 ,但一般不需要alert		   
		}   
	}

 。。。

 

Window.open:


window.open("<%=basePath %>fareHeaders.do","upload","menubar=no,status=no,resizable=no,scrollbars=1,width=600,height=200pt,top=200,left=300");

 

打开的页面:

var parentWin = window.dialogArguments?window.dialogArguments : window.opener;
window.onload = function(){
        var mm = "${MESSAGE}";
        if(null != mm && mm == "Save Ok!"){
            var line = $("fareHeadersBean.marketingAirline").value;
            var refId = $("fareHeadersBean.refId").value;
            var dis = $("fareHeadersBean.distributor").value;
            parentWin.doaddrefId(line,refId,dis);     //调用父页面方法doaddrefId
            window.close(); 
        }
    }

 
子页面点击Save后,request.setAttribute(MyConstants.MESSAGE_KEY, "Save Ok!");再进入子页面后,mm不为空,可传值给父页面。

 

模态窗口:

var returnValue = window.showModalDialog('<%=basePath%>package/fareLevel.jsp',"fareLevel","status:false;dialogWidth:350px;dialogHeight:150px");

 

子页面:

<html>
	<head>
		<base href="<%=basePath%>">
		<title>Fare level</title>
		<script type="text/javascript">
		function doConfirm(){
			var fareLevel = document.getElementById("fareLevel");
			if(fareLevel.value==""){
				alert(" Please input !");
				return false;
			}
			window.returnValue=fareLevel.value;
			window.close();
		}
		</script>

	</head>
	<body style="text-align: center;">
	<div >
		<br>Fare Level:<input type="text" id="fareLevel" />
		<br>
		 <br/>
		<input type="button" onclick="return doConfirm();" style="width: 60" value="OK">
		</div>
	</body>
</html>

 。。。

 

 

 

 

 

  • 大小: 20.9 KB
  • 大小: 24.2 KB
  • 大小: 25.7 KB
  • 大小: 58.8 KB
分享到:
评论
3 楼 我是你们的爹 2016-05-17  
这是多少年前的东西了还不删?问题这么多不是在误导别人么
2 楼 dkw19860421 2014-05-21  
360和谷歌不适用,刚才发错了
1 楼 dkw19860421 2014-05-21  
火狐和360不适用啊

相关推荐

    window.open父子窗口传值问题

    在Web开发中,`window.open` 是一个JavaScript函数,它用于打开新的浏览器窗口或标签页。这个函数在处理用户交互,比如点击按钮打开新页面,或者在不同窗口间传递数据时非常常见。当我们谈论“window.open父子窗口...

    js window.open iframe dialog

    在JavaScript的世界里,`window.open`、`iframe`和`dialog`是三个非常重要的概念,它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点,并结合实例来帮助你理解它们的用法。 1. `window.open...

    chrome-extension---Access-Local-Files:Chrome扩展程序可打开本地文件并执行跨域访问的iframe中的window.open

    从iframe打开window.open Chrome会阻止从跨域框架中单击的所有window.open。 该扩展名允许您打开窗口。 单击链接到本地​​文件。 文件打开。Chrome商店原始扩展名 原始的chrome扩展名仅允许打开本地链接。 我已经...

    JS控制弹出页面窗口控件(openWin)

    window.open()和window.showModalDialog(),并解决了showModalDialog()弹出窗口中列表分页的问题。 提供了三个JS方法: (1)showWindow(sURL, width, height); (2)showWindowInPage(pageUrl, params, title, ...

    IFrame AND window对象

    1. **导航控制**:`window.location`用于获取或设置当前页面的位置,`window.open()`可以打开新窗口。 2. **页面操作**:`window.onload`和`window.DOMContentLoaded`事件分别在页面完全加载和DOM结构加载完成后触发...

    HTML5如何用window.postMessage在网页间传递数据

    作为发起端,我们可以open一个新窗口,或创建一个iframe,往新窗口里发送数据,简单起见,我们每6秒钟发送一次,然后创建消息监听器,从目标窗口监听它反馈的信息。 //弹出一个新窗口 var domain = '...

    layui 弹出层值回传解决方式

    如下所示: layer.open({ type: 2, title: "设置围栏", shadeClose: true, shade: 0.4, area: ['90%', '90%'], content: "/ElectronicFence/Map?... var res = window["layui-layer-iframe" +

    window.showModalDialog方法的使用

    因此,在开发过程中,更推荐使用`window.open`配合`display: none`的CSS来实现类似的效果,或者使用现代前端框架(如Bootstrap的模态组件)来创建模态对话框。 为了提高跨浏览器兼容性和用户体验,可以考虑以下替代...

    layer.open关闭父窗口 以及调用父页面的方法

    实例如下: //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val())...以上这篇layer.open关闭父窗口 以及调用父页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希

    layer弹窗:top.layer弹窗到父页面跨域解决办法

    标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题,主要涉及到iframe、跨域以及layer的使用技巧。下面我们将详细探讨这个问题及其解决方案。 首先,我们了解下**iframe**。iframe(Inline Frame)...

    layer.open的自适应及居中及子页面标题的修改方法

    总结来说,通过上述代码和方法,开发者可以有效地利用layer.open实现弹窗的自适应、居中以及子页面标题的修改。这些技巧在开发过程中能够提升用户体验,使得弹窗功能更加灵活和友好。在实际应用中,还可以根据具体...

    js模式化窗口问题![window.dialogArguments]

    - `window.open()`是最常见的弹出窗口方式,可以自定义参数,如窗口大小、位置等。 - `window.showModalDialog()`是IE4+支持的模态对话框,它会阻塞用户对父窗口的交互直到对话框关闭。 - `window....

    layer.open 按钮的点击事件关闭方法

    总结,本文所分享的layer.open按钮点击事件的关闭方法,涵盖了layer.open的基本用法、事件处理、关闭layer的方法、参数传递及层的管理等关键知识点。对于希望快速实现Web界面弹出层功能的开发者来说,是一篇具有实用...

    获取layer.open弹出层的返回值方法

    总结一下,获取`layer.open`弹出层返回值的关键在于: 1. 在`layer.open`的配置中,定义一个`yes`回调函数来处理返回值。 2. 在弹出层的页面中定义一个返回值的函数,例如`callbackdata`。 3. 在`yes`回调中,通过`...

    layer.open回调获取弹出层参数的实现方法

    值得注意的是,`window["layui-layer-iframe" + index]` 是用来访问弹出层内的 iframe 内容,其中 `index` 是弹出层的索引,`callbackdata` 是弹出层内定义的一个方法,用于返回所需参数。 此外,弹出层还可以通过 ...

    再iframe中刷新列表

    如果弹出层是通过`window.open`方式打开的,那么可以利用`window.opener`对象来访问父页面的数据。 **步骤详解:** 1. **打开弹出层**: - 在子页面B中打开弹出层C时,直接使用`window.open`方法即可。 ```...

    layUI使用layer.open,在content打开数据表格,获取值并返回的方法

    var row = window["layui-layer-iframe" + index].callbackdata(); // 从新窗口获取值 layer.alert("get:" + row); // 显示获取的值 // 可以使用ajax请求对数据进行进一步处理 layer.close(index); // 关闭弹窗 ...

    jsp 刷新父页面

    刷新一open()方法打开的窗口 window.opener.location.href = window.opener.location.href 刷新以winodw.showModelDialog()方法打开的窗口 window.parent.dialogArguments.document.execCommand('Refresh'); ...

Global site tag (gtag.js) - Google Analytics