js获取frameSet子页面的空间

最新推荐文章于 2021-07-17 06:57:33 发布

原创最新推荐文章于 2021-07-17 06:57:33 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文档通过四个示例文件(index.html, main.jsp, left.html 和 right.html)展示了如何使用 HTML、iframe 和 JavaScript 进行页面框架搭建及跨窗口交互。具体包括了 iframe 的使用方法、frameset 的布局方式以及子页面与父页面之间的数据传递实现。

1、index.html

<html>
<head>
<title>test</title>
</head>
<body>
 <iframe width="100%" id="iframe_id" name="iframe_id" scrolling="no"
  height="650px" src="main.htm">
</body>

</html>

2、main.jsp

<html>
<frameset cols="20%,*">
 <frame name="index" id="index" src="left.htm">
 <frame name="content" src="right.htm">
</frameset>
</html>

3、left.html

<html>
<head>
<title>test123</title>
</head>
<body>
 
 <br />
 <button name='but' value='111' onclick='onc();' >测试</button>
 <script type="text/javascript">
  var onc = function(){
   alert(parent.content.getAaa("来自host.html的值"));
  };
 </script>
</body>
</html>

4、right.html

<html>
<body>
 <input id="aaa" value="来自htmlyyjc1.html的值"/>
</body>
<script>
 var getAaa = function(){
  
  return document.getElementById("aaa").value;
 };
</script>
</html>