iframe 主父窗口函数调用

最新推荐文章于 2022-05-26 16:11:53 发布

rugaxm

最新推荐文章于 2022-05-26 16:11:53 发布

阅读量716

点赞数

分类专栏： javascript jsp java基础文章标签： iframe xhtml javascript button function html

本文链接：https://blog.csdn.net/rugaxm/article/details/7678686

版权

java基础同时被 3 个专栏收录

72 篇文章 0 订阅

订阅专栏

jsp

45 篇文章 0 订阅

订阅专栏

javascript

37 篇文章 0 订阅

订阅专栏

1.iframe 主父窗口函数调用

方式一：window.frames["frm1"].a();

方式二：window.htmlletter.a();

ps：frm1是iframe的id；a()是引用页面中的函数名

demo:

1.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>无标题文档</title>
</head>

<body>
<table>
<tr>

            <td colspan="10" align="center">
           记录内容
              </td>

   </tr>


<iframe src="2.html" id="frm1" name="frm1"></iframe>
<input type="button" value="run inner page's function" οnclick='window.frames["frm1"].a();' />
</table>
<div id="id1" style="display:none; width:90px; height:80px;">
<form method="post">
   <input type="file" />
    <button type="button" >submit</button>
    </form>
</div>
<script>

alert(document.getElementsByName("frm1")[0].src );
</script>
</body>
</html>

2.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>无标题文档</title>
<script src="Untitled-2.js"></script>
</head>
<style type="text/css">
table{
   border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:0px double #FF00FF;
border-left:0px solid #FF0000;

}
tr{
   border-bottom:none;
}
td{
   border:1px solid #CCCCCC;
}
</style>
<body>
<table>
<tr>

            <td colspan="10" align="center">
           记录内容
              </td>

   </tr>

       <tr>
       <td>
            <a href="javascript:void(0)" οnclick="parent.document.getElementById('id1').style.display='';">添加图片</a>

              </td>


         <tr>

</table>
</body>
</html>

3.Untitled-2.js

// JavaScript Document
function a(){
alert("s");
}
function getParentEl(){
parent.document.getElementById("id1").style.display="";
alert(parent.document.title);
}