CODEWITHSUNDEEP
javascriptiframe
Pavdro
Pavdro

Reputation: 427

document object points to iframe document

I'm trying to understand what's happening in my code.

So what I'm doing is 1. Iframe in a page - points to aspx page with some javascript. Worth noting its same domain so no issues with access. 2. Code in iframe window gets parent document object and injects requirejs into parent head with config in place to load my-custom-code.js 3. so my-custom-code.js is loaded into the head of the parent page and runs fine.

!!! This is what I don't get !!! When I try to use window and document in my-custom-code.js they actually point to child(iframe) document and window???

So I want to understand HOW IT WORKS.

Thanks

UPDATE: iframe js file

var $doc = $(parent.document);
var head = $doc.find("head");
var body = $doc.find("body");
var reqConfigScript = "<script class='require-default-config'>var require = { deps: ['http:\/\/localhost/scripts/parent-main.js'], callback: function(main){ } };</script>";
body.append(reqConfigScript);
var parentScript = "<script src='http:\/\/" + location.host + "/scripts/require-2.1.11.min.js' type=\"text/javascript\"></script>";
head.append(parentScript);

Upvotes: 0

Views: 153

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324680

Okay, it's a bit hard to guess because I don't know exactly how the library works... but try this:

parent.require = {
    deps: ['http:\/\/localhost/scripts/parent-main.js'],
    callback: function(main){ }
};
var parentScript = parent.document.createElement('script');
// important to use `parent.document` so the right document owns the script
parentScript.src = "http://"+location.host+"/script/require-2.1.11.min.js";
parentScript.type = "text/javascript";
parent.document.body.appendChild(parentScript);

Upvotes: 1

Related Questions