Work with javascript from iframe

Question

I have a script:

$(document).ready(function(){
    $('#submit').click(function(e){
        window.location.href = '/dash/do/record/' + $('#filename').val()
        return false;
    });
});

written as <script src="...jquery..."></script> and <script>... the code </script>

If I load it right from the browser, it works, but if it is called through an iframe, not. What's the reason? What should I do? (The main page has the jquery tag, too)

So are you trying to redirect the iframe or the parent window ? — adeneo
– adeneo, Commented Jun 9, 2014 at 19:04
An iframe is a separate document. You'd need to reference parent.document. — isherwood
– isherwood, Commented Jun 9, 2014 at 19:07
@Jai that stands for a input that has a value which determines the name of the file that's gonna be recorded, as you see in the url — user3144310
– user3144310, Commented Jun 9, 2014 at 19:24

Monarch Wadia · Accepted Answer · 2014-06-09 19:31:58Z

2

You are trying to redirect the iframe to a new site. Most likely your browser is protecting you from Cross Site Scripting. I tried to replicate your results by redirecting my iFrame to Google. My console subsequently popped an error and now reads the following:

Refused to display 'https://www.google.ca/?gfe_rd=cr&ei=EAiWU_TDMKuC8QfC4YG4DA&gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

You can still redirect the parent by using :

window.top.location.href = '/dash/do/record/' + $('#filename').$

Or redirect the iframe itself with:

window.top.$('iframe')[0].src = ""

edited Jun 9, 2014 at 19:31

answered Jun 9, 2014 at 19:19

Monarch Wadia

5,0944 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3144310 Over a year ago

thanks, but I just want to redirect the frame, not the whole page. That's the important point.

Jai · Accepted Answer · 2014-06-09 19:31:30Z

1

see if you are executing this script from an iframe which is a child window then you have to use parent:

window.parent.location.href = "";

want to redirect the iframe, not the whole page.

Then you can create a function on parent page to change the src of the iframe:

on parent page:

function changeSrc(url){
   $('iframe').attr('src', url);
}

on iframe document:

$(document).ready(function(){
   $('#submit').click(function(e){
      window.parent.changeSrc('/dash/do/record/' + $('#filename').val());
      return false;
   });
});

edited Jun 9, 2014 at 19:31

answered Jun 9, 2014 at 19:09

Jai

74.8k12 gold badges77 silver badges104 bronze badges

7 Comments

user3144310 Over a year ago

@want to redirect the iframe, not the whole page. I have a important thing to display that's why I separate the content and the other thing into iframes

Jai Over a year ago

okay! then you can create a function to change src of the iframe on the parent page and call it from iframe's page.

user3144310 Over a year ago

just that easy? ok thanks I'll do so. But sure that with changing the src it reloads the page?

Monarch Wadia Over a year ago

@JuanRocamonde see my answer. Jai's should work as well!

user3144310 Over a year ago

Yes, that is. But about the thing of .$, what was a trouble with pico, that shows that when the line is not complete, it is .val(). Does .$ do something, @Jai ? and do I need to still return false?

|

Collectives™ on Stack Overflow

Work with javascript from iframe

2 Answers 2

1 Comment

on parent page:

on iframe document:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

on parent page:

on iframe document:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related