Cannot read property 'contentWindow' of null - iframe in ionic menu

Question

Here is my plunker:

http://plnkr.co/edit/8SOkJeAG4Tctp4zLoAJ0?p=preview

var iframe = document.getElementById('myIframe');
var iframediv = iframe.contentWindow.document;      // canvas goes here
iframediv.body.innerHTML += '<canvas id="stage" width="360" height="180"></canvas>';

Is the code where I am getting the cannot read property error.

I'm attempting to create a canvas in an iframe, the iframe is located on a page which is loaded as an ionic menu.

I want the code which controls the data in the canvas to be contained in a separate js file for easy readability and re-use the code if required.

The problem seems to be that since I'm declaring my JavaScript file in my index.html, but the iframe I want to use is in my home.html file then the JavaScript file can't find it?

How should I declare my iframe and javascript files so that it can read the properties of my iframe in a nested javascript file?

Solution

Rather annoyingly and as is so often the case, it was a stupid mistake of my own making!

I've now placed the iframe canvas loader in to a named function and I'm calling that from the controller. My issue when I tried this before was that I was calling it from the wrong controller function so it was never loading - DOH!