javascript iframe 父視窗和子視窗實現代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、父視窗調用iframe子視窗方法
1、html文法：<iframe name="myframe" src="child.html"></iframe>
2、父視窗調用子視窗：myframe.window.functionname();
3、子窗品調用父視窗：parent.functionname();
簡單地說,也就是在子視窗中調用的變數或函數前加個parent.就行
4、父視窗頁面源碼：
複製代碼代碼如下:
<html>
<head>
<script type="text/網頁特效">
function say() {
alert("parent.html------>i'm at parent.html");
}
function callchild()
{
//document.frames("myframe").f1();
myframe.window.say();
}
</script>
</head>
<body>
<input type=button value="調用child.html中的函數say()" onclick="callchild()">
<iframe name="myframe" src="child.html"></iframe>
</body>
</html>

5、子視窗頁面：
複製代碼代碼如下:
<html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->i'm at child.html");
}
function callparent() {
parent.say();
}
</script>
</head>
<body>
<input type=button value="調用parent.html中的say()函數" onclick="callparent()">
</body>
</html>

二、iframe 父視窗和子視窗相互的調用方法
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.111cn.net";
子視窗調用父視窗：parent.document.getelementbyid("parent_document_object").object_attribute = attribute_value
例： parent.document.getelementbyid("myh1").innerhtml = "http://111cn.net";
3、完整的例子
test.htm
複製代碼代碼如下:
<html>
<head>
<title> test page </title>
<script src="prototype-1.4.0.js"></script>
<script language="javascript">
function show()
{
window.frames["iframe_text"].document.getelementbyid("myh1").innerhtml = "http://hi.111cn.net";
}
</script>
</head>
<body>
<iframe height="350" width="600" src="iframe_test.htm" name="iframe_text"></iframe>
<form action="" method="post">
<input name="haha" id="haha" type="text" maxlength="30" value="haha" />
<br />
<textarea cols="50" rows="5" id="getattributemethod"></textarea>
<input type="button" onclick="show();" value="提交"/>
</form>
<h1 id="myh1">d</h1>
</body>
</html>

frame_test.htm
複製代碼代碼如下:
<!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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<script language="javascript">
function show()
{
parent.document.getelementbyid("myh1").innerhtml = http://111cn.net;
}
</script>
<body>
<h1 id="myh1">ha</h1>
<form action="" method="post">
<input name="abc" id="abc" type="text" maxlength="30" value="abc" />
<br />
<textarea cols="50" rows="10" id="text"></textarea>
<br />
<input type="button" value="提交" onclick="show();"/>
</form>
</body>
</html>

test.htm裡面firefox下訪問iframe 必須用name，不能用id，所以要改為name="iframe_test" 。(http://chenling1018.blog.163.com/blog/static/1480254200811891041694/)
三、在c#中如何動態改變iframe的src值，動態指向一個網頁
1)如果是javascript指令碼
給iframe加一個id如<iframe id=frmlist……
在指令碼寫
frmlist.document.location=strnewurl
2)如果是背景程式
給iframe加一個id，再加上runat=server 如<iframe id=frmlist runat=server ……
在程式裡寫
frmlist.attributes.add("src",strnewurl);

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More