在父頁面調用子頁面的JS方法

2019-11-20 21:55:49

字體：大中小

來源：轉載

供稿：網友

今天弄了一天了，終于在網上找到了解決辦法

注意：問題是在父頁面調用子頁面的方法。。。。。

父頁面：parent.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
function parentFunction() {
alert('function in parent');
}

function callChild() {
  child.window.childFunction();
  /*
   child 為iframe的name屬性值，
   不能為id，因為在FireFox下id不能獲取iframe對象
  */
}
</script>
</head>
<body>
<input type="button" name="call child" value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>

子頁面：child.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
function childFunction() {
alert('function in child');
}

function callParent() {
parent.parentFunction();
}
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
</body>
</html>

大家可以根據自己的需求修改相應的代碼即可。。。。。。。

上一篇：js獲取URL的參數的方法(getQueryString)示例

下一篇：javascript完美拖拽的實現方法