Question

我需要在iframe中运行JavaScript代码。但是在创建iframe后加载了id为“us”的脚本。如何在iframe中运行此javascript？

    <iframe id="preview">
        #document
            <html>
                <head>
                    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                    <script id="us" type="text/javascript">
                        $("#preview").ready(function() {
                            $(".test").click(function() {
                                    alert(true);
                            });
                        });

</script>
                </head>
                <body>
                    <style></style>
                    <div class="test"></div>
                </body>
            </html>
    </iframe>

提前致谢。

Answer 1

IFrame无法访问其外部内容。 IFrame中的所有内容都是单独的页面，因此您会受到威胁。所以你在你的文件中做好了。

示例：http://jsfiddle.net/ZTJUB/

// Since this is page you wait until it's loaded
$(function() {
    $(".test").click(function() {
            alert(true);
    });
});

Answer 2

iFrame中的jQuery实例并不知道它应该遍历父DOM，因此它不知道在哪里查找id为＃34的元素;预览＆＃34;

根据我上面的评论，你应该附上iframe的文件。就像这样：

// Since this is page you wait until it's loaded
$(document).ready(function() {
    $(".test").click(function() {
            alert(true);
    });
});

修改只是意识到你可能在这里遇到了一个完全不同的问题 - Html code as IFRAME source rather than a URL - 如果你试图嵌入iframe代码，你就会遇到问题。以下面的代码为例：

<html> <head></head> <body> Some stuff here <iframe id="preview"> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script id="us" type="text/javascript"> $(document).ready(function() { $(".test").click(function() { alert(true); }); }); </script> </head> <body> <style></style> <div class="test">test</div> </body> </html> </iframe> </body> </html>

如果你在firefox中渲染该页面，然后在firebug中检查源代码，你会看到：

<html> <head></head> <body> Some stuff here <iframe id="preview"> <html> <head></head> <body></body> </html> </iframe> </body> </html>

这种情况正在发生，因为浏览器不希望在iframe标记之间看到内联代码。

Answer 3

由于您未在评论中解决问题以更好地说明您要执行的操作...我将假设您尝试访问内容 IN 您的iframe FROM < / strong>您的父页面。如果尝试从iframe中运行它，其他答案应该可以正常工作。

在父页面上尝试类似：

$(function() { $("#preview").load(function () $("#preview").contents().find(".test").click(function() {alert(true);}); }); });

*这假设父级和iframe都位于同一个域中。

iframe中的JavaScript代码

3 个答案: