JavaScript code in iframe

2019-03-03 11:38发布

站内问答 / JavaScript
491 3 5

I need to run JavaScript code in iframe. But script with id "us" loaded after creating iframe. How to run this javascript in iframe?

    <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>

Thanks in advance.

3条回答
Explosion°爆炸
2楼-- · 2019-03-03 12:18

The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"

As per my comments above, you should attach to the iframe's document.ready, like this:

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

EDIT: Just realizing you are probably having an entirely different issue here - Html code as IFRAME source rather than a URL - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:

<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>

if you render that page in firefox, and then inspect the source in firebug, you'll see:

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

This is happening because the browser isn't expecting to see the code inline between the iframe tags.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-03-03 12:22

The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.

Example: http://jsfiddle.net/ZTJUB/

// Since this is page you wait until it's loaded
$(function() {
    $(".test").click(function() {
            alert(true);
    });
});
查看更多
0人赞 添加讨论(0) 举报
做个烂人
4楼-- · 2019-03-03 12:38

Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content IN your iframe FROM your parent page. Since the other answer should work fine if trying to run it from within the iframe.

On the parent page try something like:

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

*This assumes both parent and iframe are on the same domain.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)