Question

I have the following page layout

<div id="userscore" >test</div>
<iframe name="frameContent" id="frameContent" width="100%" height="100%" frameborder="0" />

The iFrame gets its content dynamically including its javascript.

When I try to access userscore from within the iFrame

console.log(window.parent.document.getElementById('user-score'));

I get in the console

<div id="userscore" >test</div>

When I try to use

window.parent.document.getElementById('user-score').html('Change the content');

I get

Object [object HTMLDivElement] has no method 'html'

Is there a way around this? Or can anybody shed some light as to what is going on.

Answer 1

A DOM-element doesn’t have a method .html(). That method is an extension often seen in JavaScript-libraries like jQuery.

When using plain JavaScript you have to set the .innerHTML property if you want to alter the content of the element.

window.parent.document.getElementById('user-score').innerHTML = "New content";