Question

创建了两个简单的html文件test.html和frame.html，在这里我将test.html内装入frame.html。但是在test.html中调用frame.html函数不起作用，其给定函数未定义

test.html

<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
  </head>
  <body>
    <h3 align="center">TEST AB TEST</h3>
    <div id="load_frame" ></div>
    <div style='padding:30px;background-color:red; '>
      <input id="test_Button" type='button' value='test_Button'/>
    </div>

    <script>
      $(function(){
        $('#load_frame').append('<object data="frame.html"/>');
      });
      $("#test_Button").bind( "click",function(){
        console.log('aaaaaaaa');
        myFunction1();
      });
     </script>
   </body>
</html>

frame.html

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  </head>
  <body>
    <h3 align="center">TEST Frame</h3>
    <div style='padding:30px;width:500px;'>
      <input id="frame_button" type='button' value='frame_button'/>
    </div>
    <script>
      function myFunction1() {
        alert('Inside frame');
      }
      $("#frame_button").bind( "click",function(){
        myFunction1();
        console.log('aaaaaaaa');
      });
            
    </script>
  </body>
</html>

Error

未捕获的ReferenceError：未定义myFunction1

Answer 1

您需要在框架窗口的上下文中调用该函数

 $("#test_Button").bind( "click",function(){
    //reference to the frame window
    var frameWindow =$('#load_frame object')[0].contentWindow;
    // the function is a property of that window
    frameWindow.myFunction1();
 });

DEMO

Answer 2

您不能简单地访问其他框架的内容。浏览器供应商出于安全原因实现了这一事实。

如果您真的想在帧之间“交谈”，则可以使用value3 = true：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

从附加的外部内容中单击不起作用

2 个答案: