Question

我有一个html页面a.html，其中有一些content，iframe和button。

a.html

<html>
    <head>
    </head>
    <body>
        // some content
        <button id="insert">Insert</button>
        <iframe id="outputContentLoadContainer" src=""  height="290px" width="100%" style="border:none"></iframe>
    </body>
</html>

点击button后，我将src iframe属性填充为另一个html说b.html文件，该文件已正确加载。

b.html

<!DOCTYPE html>
<html lang="en">
    <head> 
        <script src="js/jquery.js"></script>
        <style>
            #container{
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="container">
        </div>
        <script type="text/javascript">
        </script>
    </body>
</html>

立即

当用户点击“插入”时，我会将另一个按钮插入iframe主体和按钮的事件处理程序，如此

JS：

$("#insert").on('click',function(e) {   
    $("#outputContentLoadContainer").attr("src","b.html");          
    appendHtml = '<button id="test"> Test</button>';
    appendjs = '$(document).ready(function(e){
        $("#test").click(function(e){
            alert("hi");
        });       
    });';   
}); 

$("#outputContentLoadContainer").attr("src","b.html").on('load', function(){
    $(this).contents().find("body").find('div#container').append(appendHtml);
    $(this).contents().find("style").append(cssArray);
    $(this).contents().find("script").append(appendjs);
});

问题是

我的输出显示我的test button，甚至js出现在脚本代码b.html中，但该事件不起作用？为什么？我怀疑脚本应该加载到window.load。请帮助。

在window.load函数中动态地在iFrame中添加脚本

0 个答案: