各个iframe内获取值，互相调用方法测试

最新推荐文章于 2023-08-13 23:00:49 发布

pingguonjb

最新推荐文章于 2023-08-13 23:00:49 发布

阅读量393

点赞数

分类专栏： iframe

本文链接：https://blog.csdn.net/pingguonjb/article/details/47054853

版权

iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

各个iframe内获取值，互相调用方法测试
父窗口获取子iframe内的变量值、调用函数：
通过window.frames["iframe_id"]获取到子iframe对应的window对象，然后再获取值，调用函数。如：
    var left=window.frames["left_f"].document.getElementById("left").value;
    window.frames["right_f"].right_a();

子窗口获取父窗口的变量值，调用函数：
通过parent.window获取到父窗口的window对象。如：
        var main=parent.window.document.getElementById("main").value;
        parent.window.main_a();

子窗口获取兄弟窗口的变量值，调用函数：
先获取父窗口的window对象，通过父窗口的farmes[]集合获取兄弟窗口对应的window对象。如：
    var left=parent.window.frames["left_f"].document.getElementById("left").value;
    parent.window.frames["left_f"].left_a();
=================================================
head.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
        body,html
        {  
           height:100%;
           margin:0px;
           padding:0px;
           overflow:hidden;
        }
        #head
        {
           border:1px solid blue;
           height:100%;
        }
     </style>
</head>
<body>
<div id="head"></div>
</body>
</html>
=================================================
left.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
        body,html
        {  
           height:100%;
           margin:0px;
           padding:0px;
           overflow:hidden;
        }
        #left1
        {  
           border:1px solid green;
           height:100%;
        }
     </style>
</head>
<body onload="left_load();">
<div id="left1">
   <input type="text" id="left" value="left" style="width:150px;height:15px;"/>
</div>
 <script type="text/javascript">
function lef...

main.html
<!DOCTYPE html>
<html>
<head>
     <title>test iframe</title>
     <script type="text/javascript">
     </script>
     <style type="text/css">
        body,html
        {  
           height:100%;
           margin:0px;
           padding:0px;
        }
        #main1
        {
           height:100%;
        }
     </style>
</head>
<body onload="load();">
    <div id="main1" >
       <div id="head"  style="height:120px;border:1px solid blue;">
          <input type="text" id="main" value="main" style="width:150px;height:15px;"/>
       </div>
       <iframe id="left_f" name="left_f" src="left.html" width="20%" height="80%" frameBorder="0" /></iframe>
       <iframe id="right_f" name="right_f" src="right.html" width="79%" height="80%" frameBorder="0" /></iframe>
    </div>
     <script type="text/javascript">
     function load()
     { 
         var left=window.frames["left_f"].document.getElementById("left").value;
         var right=window.frames["right_f"].document.getEle...