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总结 + window.open_第1张图片

分别点击后页面:


iframe总结 + window.open_第2张图片
 
iframe总结 + window.open_第3张图片

父窗口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:


iframe总结 + window.open_第4张图片

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>

 。。。

 

 

 

 

 

你可能感兴趣的:(JavaScript,html,jsp,IE,firefox)