how do i get javascript injected ouside of iframe to execute in global scope

Question

hopefully i'm asking this right..

Here's my situation: I have html running inside an iframe that makes a controller call to get back a view with a javascript file referenced in it..

so.. main page:

<html>
<body>
<iframe src="page2.html" />
</body>
</html>

page2.html:

<html>
<body>
<script>
$.ajax({
  url: "controller\myview",
  type: "POST",
  data: null,
  dataType: "html"
}).done(function(view) {
 var body = $(window.top.document.body);
 body.append(view);
});
</script>
</body>
</html>

myview sends back a typical but has a tag at the bottom of it that creates a dialog of the form. the whole point here is to get the jquery ui dialog outside of the iframe, which when i inspect the DOM it's outside the iframe; however, when the javascript that is now in the mainpage executes it seems to think it's till in the iframe.

it looks like i have a scope problem but i don't know how to get around it. i had hoped if i put the script tag in the mainpage it would scope itself outside the iframe, i even tried moving the scope file to the head tag with no luck..

any suggestions?

score 1 · Answer 1 · answered Aug 02 '13 at 20:31

1

How come you have an iFrame of a page that does an ajax call to controller/myview when you can do the ajax call in your main page instead? If you make the ajax call in your main html page, you can handle it in it's own scope which should eliminate the whole scope issue and also get rid of the redundant iFrame while you're at it. Sorry if I'm misinterpreting your question, it is a bit confusing.

answered Aug 02 '13 at 20:31

Johnny Li

67
4

so currently the way the site is setup is there's a list of items in written in classic asp contained within an iframe hosted in an MVC site. janky i know but i'm trying to avoid recoding that page too. the item details was built in MVC and is called through a jquery ajax call when the items hyperlink is clicked. So, in order to get the dialog that will then show the View returned by the classic asp page outside of the iframe i had to inject the partial view into the parent container and then call jquery ui's dialog method on it. this is where my problem lies.. – Josh Meiburg Aug 02 '13 at 21:12
Quick question, is the domain with the item detail the same as the main page domain? – Johnny Li Aug 02 '13 at 21:50
yes, the domains are the same. my controller call is at say "http://myserver/listofitems/items/details" and my page is at "http://myserver/pages/lists/items.asp" the site's in the middle of a conversion of old asp to new mvc and this iframe bs is a stopgap. – Josh Meiburg Aug 02 '13 at 21:54
Well, I tried replicating by creating a main.html with iframe with source page2.html. Then in my page2.html, I simply copied and pasted your: var body = $(window.top.document.body); body.append("TEST"); to see if it would append TEST to the body of my main and it was fine so I'm not sure if you actually have a scope issue in terms of accessing the top window. Maybe post more code and make sure its not some other issue such as an issue with jquery ui. – Johnny Li Aug 02 '13 at 22:42
it's not about the appending, that's easy to do, it's if i append javascript to the parent window (or window.top.document.body in this case) the javascript will execute as if it were still in the iframe. that's what i mean by scoping problem. so if i appended "" to window.top.document.body it would return the body tag of the iframe, not window.top (or the parent window hosting the iframe).. this is the crux of my problem – Josh Meiburg Aug 03 '13 at 04:53
Shouldn't you be appending "" then? – Johnny Li Aug 03 '13 at 05:27
i could do that, and that would work but it would kill my code reuse when i try to use the same MVC view in an actual MVC page. i'm wanting the javascript that's injected into the parent container to run in the parent containers scope so that when i do this same process on another page without an iframe the code stays the same. i'm essentially trying to get the iframe to 'fix' this problem by moving the controller returned view to the parent so later when a real view calls the same controller they will work the same – Josh Meiburg Aug 03 '13 at 15:56
but it's sounding more and more like i just need to rewrite the asp page into mvc which would then get rid of my iframe problem and be done with it. i hate trying to use iframes this way in the first place but was seeing if there was a way to get around a rewrite. so far it seems more and more like that's my best option. – Josh Meiburg Aug 03 '13 at 15:58

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Is window.top... really taking you to the parent?
See How to access parent Iframe from javascript and JavaScript dynamically loaded into iframe runs in parent scope for more comments/code.

Also remember that you cannot get data from the iframe to the parent - if you could you would have a way to register mybank.cn and have it load mybank.com in an iframe taking all space and then eavesdrop on the mybank.com in the iframe.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 02 '13 at 20:39

LosManos

7,195
6
56
107

i see many articles on loading javascript INTO an iframe when you're creating it; what i'm trying to do is load javascript OUTSIDE an iframe from INSIDE it. unfortunately when i do it ends up executing the javascript as if it were still inside the iframe. – Josh Meiburg Aug 02 '13 at 21:15

how do i get javascript injected ouside of iframe to execute in global scope

2 Answers2