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.

owl
  • 4,201
  • 3
  • 22
  • 28

3 Answers3

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);
    });
});
Stan
  • 25,744
  • 53
  • 164
  • 242
  • 3
    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() – JClaspill Apr 24 '14 at 16:22
  • while this is a better way of writing it, it shouldn't behave any differently from what is currently being used. – Kevin B Apr 24 '14 at 16:22
  • @Steve, I put it to script with "us" id, doesn't work for me ;{ – owl Apr 24 '14 at 16:25
  • @owl Please see my example http://jsfiddle.net/ZTJUB/ Are you sure you don't miss anything? – Stan Apr 24 '14 at 16:29
  • @JClaspill - while that is true, you referenced having access to the parent's functions, which is fine, however the point is that calling `$("#preview')` from the child is useless because that method is only looking in the current DOM for an element with ID of preview. – streetlogics Apr 24 '14 at 16:32
  • @owl - for reference, @Steve is doing a shorthand method. The "long" way of doing it is: `$(document).ready(function(){ /*your code here*/ });` - I say this because that might help make it a little more clear that you are attaching the ready event to the *document* (that just so happens to have been assigned in ID on the iframe tag in the parent) – streetlogics Apr 24 '14 at 16:36
  • @owl Well how come jsfiddle is working and your code is not. Did you check console for errors? – Stan Apr 24 '14 at 16:46
  • @owl I don't think it's console. Can you open the website with chrome and then show console output? – Stan Apr 24 '14 at 16:50
  • @Steve - see my answer below, but yours is working because you correctly used an iframe src url to build your example vs. embedding the code inline. – streetlogics Apr 24 '14 at 16:59
  • @Steve, I apologize. It's pastebin and full code: pastebin.com/QbduL3F0 Maybe it's because it is created after loading the DOM? – owl Apr 24 '14 at 17:25
  • 1
    @streetlogics No, jQuery will ignore whatever is in the `$(...)` portion when using `$(anything).ready()` and instead use `document`. – Kevin B Apr 24 '14 at 17:42
  • Yah, you're right Kevin http://api.jquery.com/ready/ - `The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.` - I've misread that before to mean "can only be called on a jQuery object in the current document". I was crossing `.load` and `.ready` – streetlogics Apr 24 '14 at 18:07
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.

Community
  • 1
  • 1
streetlogics
  • 4,640
  • 33
  • 33
  • I tried it. I need to attach it to script with id "us"? Doesn't work again. ;( – owl Apr 24 '14 at 16:43
  • Edited my answer to reflect the problem I believe you are experiencing. – streetlogics Apr 24 '14 at 17:00
  • I apologize. It's pastebin and full code: http://pastebin.com/QbduL3F0 Maybe it's because it is created after loading the DOM? – owl Apr 24 '14 at 17:24
  • 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 – streetlogics Apr 24 '14 at 18:03
  • 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.` (http://api.jquery.com/ready/) – streetlogics Apr 24 '14 at 18:09
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.

JClaspill
  • 1,725
  • 19
  • 29
  • 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 Apr 24 '14 at 16:43
  • @streetlogics Fixed the loading issue. However I cannot fix the framed page potentially changing in the future. – JClaspill Apr 24 '14 at 16:47
  • 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) – streetlogics Apr 24 '14 at 16:51