inject a javascript function into an Iframe

First of all you can only accomplish this if your frame and the page displaying it is within the same domain (Due to cross-domain rules)

secondly you can manipulate dom and window objects of the frame directly through JS:

frames[0].window.foo = function(){
   console.log ("Look at me, executed inside an iframe!", window);
}

to get your frame from a DOMElement object you can use:

var myFrame = document.getElementById('myFrame');

myFrame.contentWindow.foo = function(){
       console.log ("Look at me, executed inside an iframe!");
}

Note that the scope in foo is NOT changed, so window is still the parent window etc. inside foo.

If you want to inject some code that needs to be run in the context of the other frame you could inject a script tag, or eval it:

frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');

Though the general consensus is to never use eval, I think its a better alternative than DOM injection if you REALLY need to accomplish this.

So in your specific case you could do something like:

frames[0].window.eval(foo.toString());

Here's my solution. I'm using jquery to insert the content, then using eval to execute the script tags in the context of that iframe:

    var content = $($.parseHTML(source, document, true));
    $("#content").contents().find("html").html(content);
    var cw = document.getElementById("content").contentWindow;
    [].forEach.call(cw.document.querySelectorAll("script"), function (el, idx) {
        cw.eval(el.textContent);
    });

This code is the result of my research. The accepted answer also helped me a lot. First of all, I create a simple iframe:

<iframe id="myiframe" width="200" height="200" srcdoc="<h1 id='title'>Hello from Iframe</h1><button type='button' id='fire'>Click Me!</button>
"></iframe>

For access to iframe's window and document I used this code.

const iframe = document.getElementById('myiframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;

Finally I injected js codes into iframe:

var script = iframeDoc.createElement("script");
  script.append(`
    window.onload = function() {
     document.getElementById("fire").addEventListener('click', function() {
        const text = document.getElementById('title').innerText;
        alert(text);
     })
  }
`);
  iframeDoc.documentElement.appendChild(script);

Demo: https://jsfiddle.net/aliam/1z8f7awk/2/