0

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.

Improve this question
6
  • 2
    Wouldn't that work just fine, assuming you're showing us the content of the iFrame, and not trying to actually write an iframe with content directly in the parent document ? Commented Apr 24, 2014 at 16:17
  • 1
    IFrame has no access to what's outside of IFrame. Commented Apr 24, 2014 at 16:19
  • Is the iframe the same domain as the parent? Are you trying to invoke code IN the parent or FROM the parent? Commented Apr 24, 2014 at 16:19
  • 1
    you don't need #preview selector. Treat iframe page as if it's completely another page. Commented Apr 24, 2014 at 16:20
  • @steve What about parent.function_name, assuming both are on the same domain? Commented Apr 24, 2014 at 16:21

3 Answers 3

Reset to default
3

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);
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Your comment about iframe not able to access outside of it is incorrect if both iframe and parent are on the same domain. parent.functionName()
while this is a better way of writing it, it shouldn't behave any differently from what is currently being used.
@Steve, I put it to script with "us" id, doesn't work for me ;{
@owl Please see my example jsfiddle.net/ZTJUB Are you sure you don't miss anything?
@streetlogics No, jQuery will ignore whatever is in the $(...) portion when using $(anything).ready() and instead use document.
|
2

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.

Improve this answer

5 Comments

I tried it. I need to attach it to script with id "us"? Doesn't work again. ;(
Edited my answer to reflect the problem I believe you are experiencing.
I apologize. It's pastebin and full code: pastebin.com/QbduL3F0 Maybe it's because it is created after loading the DOM?
Yah - that's probably part of the problem in that paste bin, although I can't say for sure. What I can say is that if you execute that code, most likely, the part where you write the script and document.ready part won't get executed because the document ready call will probably have already been fired. In that instance, just remove the document.ready, and have it run as soon as it's injected into the page. Again, I can't say for sure, but I'm fairly certain that would work
Looks like the .ready thing should actually be a non-issue - If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately. (api.jquery.com/ready)
1

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.

Improve this answer

3 Comments

If you put that in the parent, it will attach to the parent's document.ready function, which will very likely fire before the iframe's document.ready function fires. Of course if you remove jquery from the iframe that works for now, but won't work in the future if the framed page gets more advanced.
@streetlogics Fixed the loading issue. However I cannot fix the framed page potentially changing in the future.
Yup, that looks like the better way to do it if you're going to access it from the parent. (assuming same domain of course)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.