JavaScript code in iframe

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.

asked Apr 24 '14 at 16:16

owl

69411020

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 ?

– adeneo
Apr 24 '14 at 16:17

1

IFrame has no access to what's outside of IFrame.

– stan
Apr 24 '14 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?

– JClaspill
Apr 24 '14 at 16:19

1

you don't need #preview selector. Treat iframe page as if it's completely another page.

– Quad
Apr 24 '14 at 16:20

@steve What about parent.function_name, assuming both are on the same domain?

– JClaspill
Apr 24 '14 at 16:21

|
show 1 more comment

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.

asked Apr 24 '14 at 16:16

owl

69411020

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 ?

– adeneo
Apr 24 '14 at 16:17

1

IFrame has no access to what's outside of IFrame.

– stan
Apr 24 '14 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?

– JClaspill
Apr 24 '14 at 16:19

1

you don't need #preview selector. Treat iframe page as if it's completely another page.

– Quad
Apr 24 '14 at 16:20

@steve What about parent.function_name, assuming both are on the same domain?

– JClaspill
Apr 24 '14 at 16:21

|
show 1 more comment

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.

asked Apr 24 '14 at 16:16

owl

69411020

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.

javascript jquery html iframe

asked Apr 24 '14 at 16:16

owl

69411020

asked Apr 24 '14 at 16:16

owl

69411020

asked Apr 24 '14 at 16:16

owl

69411020

asked Apr 24 '14 at 16:16

owl

69411020

asked Apr 24 '14 at 16:16

owl

69411020

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 ?

– adeneo
Apr 24 '14 at 16:17

1

IFrame has no access to what's outside of IFrame.

– stan
Apr 24 '14 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?

– JClaspill
Apr 24 '14 at 16:19

1

you don't need #preview selector. Treat iframe page as if it's completely another page.

– Quad
Apr 24 '14 at 16:20

@steve What about parent.function_name, assuming both are on the same domain?

– JClaspill
Apr 24 '14 at 16:21

|
show 1 more comment

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 ?

– adeneo
Apr 24 '14 at 16:17

1

IFrame has no access to what's outside of IFrame.

– stan
Apr 24 '14 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?

– JClaspill
Apr 24 '14 at 16:19

1

you don't need #preview selector. Treat iframe page as if it's completely another page.

– Quad
Apr 24 '14 at 16:20

@steve What about parent.function_name, assuming both are on the same domain?

– JClaspill
Apr 24 '14 at 16:21

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 ?

– adeneo
Apr 24 '14 at 16:17

IFrame has no access to what's outside of IFrame.

– stan
Apr 24 '14 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?

– JClaspill
Apr 24 '14 at 16:19

you don't need #preview selector. Treat iframe page as if it's completely another page.

– Quad
Apr 24 '14 at 16:20

@steve What about parent.function_name, assuming both are on the same domain?

– JClaspill
Apr 24 '14 at 16:21

|
show 1 more comment

3 Answers
3

active

oldest

votes

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

    });

});

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

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

|
show 12 more comments

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.

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

add a comment |

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.

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

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

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f23274389%2fjavascript-code-in-iframe%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

    });

});

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

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

|
show 12 more comments

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

    });

});

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

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

|
show 12 more comments

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

    });

});

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

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

    });

});

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

edited Apr 24 '14 at 16:28

answered Apr 24 '14 at 16:21

stan

11.6k33129207

answered Apr 24 '14 at 16:21

stan

11.6k33129207

answered Apr 24 '14 at 16:21

stan

11.6k33129207

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

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

|
show 12 more comments

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

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

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 jsfiddle.net/ZTJUB Are you sure you don't miss anything?

– stan
Apr 24 '14 at 16:29

@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

|
show 12 more comments

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

    });

});

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

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

add a comment |

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

    });

});

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

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

add a comment |

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

    });

});

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

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

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

    });

});

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

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

edited May 23 '17 at 12:11

Community♦

edited May 23 '17 at 12:11

Community♦

edited May 23 '17 at 12:11

Community♦

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

answered Apr 24 '14 at 16:40

streetlogics

3,8902426

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

add a comment |

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

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: 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. (api.jquery.com/ready)

– streetlogics
Apr 24 '14 at 18:09

add a comment |

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.

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

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

add a comment |

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.

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

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

add a comment |

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.

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

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.

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

edited Apr 24 '14 at 16:46

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

answered Apr 24 '14 at 16:31

JClaspill

1,4491627

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

add a comment |

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

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

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu