js 在iframe中的两个页面传值

最新推荐文章于 2021-12-07 14:34:39 发布

原创最新推荐文章于 2021-12-07 14:34:39 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

脚本专栏收录该内容

14 篇文章

订阅专栏

本文展示了一个简单的HTML页面如何通过JavaScript与同一目录下的不同iframe元素进行交互。主要内容包括使用JavaScript控制另一个iframe中元素的显示状态，展示了基本的网页结构及跨窗口通信的基本原理。

所有的在同一目录下面：
第一个页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv= "content-type " content= "text/html " charset= "GB2312 ">
<link rel= "stylesheet " type= "text/css " href= " ">
<script type= "text/javascript " src= " "> </script>
<script language= "javascript " type= "text/javascript "> </script>
</HEAD>

<BODY>
<table border= "1 " align= "left " width= "60% ">
<tr>
<td> <iframe name= "fa " src= "a.html "> </iframe> </td>
<td> <iframe name= "fb " src= "b.html "> </iframe> </td>
<tr>
</table>
</BODY>
</HTML>
/************a.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> aaaaaaaaa </TITLE>
<meta http-equiv= "content-type " content= "text/html " charset= "GB2312 ">
<link rel= "stylesheet " type= "text/css " href= " ">
<script type= "text/javascript " src= " "> </script>
<script language= "javascript " type= "text/javascript ">

function control()
{
parent.frames[ 'fb '].document.getElementById( "button ").style.display = 'block ';
}

</script>
</HEAD>
/************b.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> bbbbbbbbbbb </TITLE>
<meta http-equiv= "content-type " content= "text/html " charset= "GB2312 ">
<link rel= "stylesheet " type= "text/css " href= " ">
<script type= "text/javascript " src= " "> </script>
<script language= "javascript " type= "text/javascript "> </script>
</HEAD>

<BODY>
<INPUT TYPE= "button " NAME= " " style= "display:none; " id= "button " value= "I 'm here here!~~~~~~~~ ">
</BODY>
</HTML>

<BODY>
<input type= "button " value= "Display " style= "cursor:hand; " onclick= "control();return true; ">
</BODY>
</HTML>