javascript - 单击附加的外部内容不起作用

标签 javascript jquery html

创建了两个简单的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>

错误

Uncaught ReferenceError: myFunction1 is not defined

最佳答案

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

 $("#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

关于javascript - 单击附加的外部内容不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51153609/

相关文章:

javascript - Node Express JS - 处理对服务器的同时 POST 请求

javascript - 删除 node.js 数组中对象的正确方法?

html - div 中的图标定位 - 忽略文本空格

html - 当我尝试验证文件时,CSS 格式设置出错

html - 使用 CSS 突出显示当前页面

javascript - 对async/await求值细节的误解

javascript - 添加评级并删除 onClick

javascript - 更改链接鼠标悬停时的正文背景

javascript - 如何使用 JavaScript(和 jquery)检测一堆相同 div 类中的 div 溢出?

javascript - 如何使其无限淡入/淡出?