window.frameElement is undefined in Google Chrome when local, works when online

Question

I have a requirement to develop a web app that is to be accessed locally and offline. As part of the design an iframe is used to swap out content as and when needed. The trouble is that when accessed locally the script works in FF 32 and IE 11 but not in Chrome 38. All running on Windows 7 SP1 64-bit.

Further, when accessed from a server, the same script works in Chrome, FF and IE. I have a hunch that it could be caused by a bug in Chrome. Nevertheless, I would like to know if there is anything wrong with my script. I have provided them here :

index.html

<body>

<p>This example demonstrates how to assign an "onload" event to an iframe element.</p>

<iframe id="iFrame" name="iFrame" height="500px" width="500px" src="about:blank"></iframe>

<p id="demo"></p>

<button id="swap" onclick="swap()">SWAP</button>

<script>

    function swap() {

    document.getElementById("iFrame").src = "child.html";
    }

    function myFunction() {
        document.getElementById("demo").innerHTML = "Iframe is loaded.";
    }

    window.onload = myFunction();

</script>

</body>

child.html

<body>

<h1>This is an extra page...</h1>

<button onclick="next()">NEXT</button>      

<script src="worker.js" type="text/javascript"></script>        

</body>

grandchild.html

<body>

<h1 id="header"></h1>

<button onclick="prev()">PREV</button>      

<script>        
    window.onload = function () {

        init();
    };      

</script>

<script src="worker.js"></script>      
</body>

worker.js

function next() {

window.frameElement.src = "grandchild.html";    
}

function prev() {

window.frameElement.src = "child.html";

}

function init() {

var iFrame = window.frameElement;

var frameDocument = (iFrame.contentWindow || iFrame.contentDocument);

if (frameDocument.document)frameDocument = frameDocument.document;

frameDocument.getElementById("header").innerHTML = "This is from the script!!";

}

It is obvious that window.frameElement is undefined. I'm a newbie to web development. Any help will have my gratitude.

score 0 · Accepted Answer · edited May 23 '17 at 12:22

After digging around a lot, I've learned that this is a feature of Chrome/Chromium. For security purposes all local content is blocked within an iframe. There are two possible solutions to this problem :

a) As such to use an iframe one must access content from a web server. This can be accomplished by serving the entire app from a server[online] or bundling the app as a Node.js app with additions.

b) Another possible solution is to replace the iframe with a possible alternative, though not one solution seems simpler than using an iframe, IMHO.

Since my requirement is to deploy this web app locally from a CD/DVD, I find the Node.js solution attractive as this implies a possible Node-webkit deployment too.

window.frameElement is undefined in Google Chrome when local, works when online

1 Answers1