0

I need to run code as if it were running inside an iframe that is on the page, meaning that when I use window inside that code, it should use the iframe's window object. It is not an iframe I created, so my function is not defined inside it.

var myfunction = function () { // defined in parent, not in the iframe
  console.log(window); // window here should be the iframe's window object, not the parent/
  window.document.body.appendChild("Appending to iframe body");
}

// Need to somehow run this function inside the iframe
myfunction(); // as if I did this inside the iframe

I need this exact code to run inside the iframe, I know that I can use to fix this myself

frames["FrameName"].document.body.appendChild("Appending to iframe body");

but that won't fix my problem.

This is because I did not write the code myself, there is a module called Opentip that I use to create tool tips. I need to set a tooltip on an element inside the iframe; however, Opentip uses the window object in it's code to be able to create the tooltip properly.

So I need to run

Opentip(myelement, data);

as if I were running it inside the iframe, but without defining it inside the iframe.

So the Opentip function needs to use the iframe window, rather than the parent window.

yehyaawad
  • 126
  • 1
  • 11
  • the simplest way would be to inject the Opentip script into the iframe's document by adding an external script tag to it's dom. then you can call `frames["FrameName"].Opentip(frames["FrameName"].document.body, data)` to inject a script: `frames["FrameName"].document.body.appendChild(frames["FrameName"].document.createElement("script")).src="http://example.com/script.js";` – dandavis Feb 24 '16 at 01:48
  • Does the content of the frame come from the same origin (domain name) as your site? – Matti Virkkunen Feb 24 '16 at 02:08
  • I am running all of the javascript in a content_script in a chrome extension @MattiVirkkunen – yehyaawad Feb 24 '16 at 02:14
  • @dandavis I will try what you mentioned – yehyaawad Feb 24 '16 at 02:15
  • @MattiVirkkunen yes it does (my bad I misunderstood what you said) – yehyaawad Feb 24 '16 at 02:16

1 Answers1

0

The code provided is of course untested. This is answer is assuming:

  • OP circumstances are that the requirements of same origin policy are met.
  • OP cannot edit the child page directly.
  • OP cannot use Ajax.

Resources

Snippet

//A//Ref to iframe
var iFrm = document.getElementById('iFrm')

//B//Listen for load event 
iFrm.addEventListener('load', function(e) {
  
  //C//Ref to iframe Window
  var iWin = iFrm.contentWindow;
  
  //D//Ref to iframe Document 
  var iDoc = iFrm.contentDocument? iFrm.contentDocument:iFrm.contentWindow.document;
  
  //E//Ref element targeted by Opentip--replace {{>SEL<}} with appropriate selector
  var iTgt = document.querySelector({{>SEL<}});
  
  //F//Create, configure, deploy, and inject <script> tag to iframe <head>
  var iNode = document.createElement(`script`);
  iNode.src = "https://cdn.jsdelivr.net/opentip/2.4.6/opentip-native.min.js";
  iDoc.head.appendChild(iNode); 
  
  //G//Call Opentip from iframe Window, and hopefully in iframe's context
  iFrm.contentWindow.Opentip = function(iTgt, data);
}
  
/* Notes */
/*//F//Alternative to target iframe <head>:
window.frames["iFrm"].document.getElementsByTagName("head")[0];*/
                      
   /*//If not successful in accuirring iframe, try replacing all
 "document." with "contentWindow", "contentDocument", or "contentWindow.document"*/
<iframe id="iFrm" name="iFrm" src="/"></iframe>

<!--Optionally you can add an onload event to the iframe itself

<iframe id="iFrm" name="iFrm" src="/"></iframe>

-->
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • I've run into something strange. Once I call ```iFrm.contentWindow.Opentip``` (in the load event listener) It says that ```iFrm.contentWindow.Opentip``` is still undefined, but after it gives me that error, I checked again manually in the browser console and it exists ( I can run it )... I'm not sure but I think the event listener might be taking a snapshot of the data stored inside ```iFrm.contentWindo.Opentip``` where it was undefined instead of accessing the new defined function. Any ideas? – yehyaawad Feb 25 '16 at 22:52
  • If you get quirky result, it's most likely because Opentip binds to the Window. When you are calling a function, the proper context must be established. Unfortunately, it's not cut and dry as considering Windows to be global since you are invoking from the child page, the actual window is probably considered the parent's Window and not a Window belonging to the child page. To get a proper reference to the child's Window, I think the call needs to originate from parent. Try `ifrm.contentWindow.document.Opentip` or `parent.contentDocument.document.Opentip` – zer00ne Feb 26 '16 at 01:11