CODEWITHSUNDEEP
javascriptgoogle-chromeiframeinnerhtml
Angrybambr
Angrybambr

Reputation: 220

Google Chrome not updating iframe element innerHTML after dynamically changes in JavaScript

I have a quite big page which contains Iframe and javascript functions to work with it. I will simplify my code just for example: 

Simple html:
<html>
<head>
    head tags
</head>
<body>
    <iframe id="iframe_1" align="center" src="iframe-test.html"></iframe>
</body>
</html>

Content of iframe-test.html:

<html>
<head>
</head>
<body>
    <span id="my_element">50</span>
</body>
</html>

My JavaScript function: 

function test(){
var my_element = document.getElementById("iframe_1").contentWindow.document.getElementById("my_element");
my_element.innerHTML = "60";
}

So. it works perfect in IE and FF, but Chrome not updating innerHTML of my_element until I selected it with mouse! Yep, that's right. I'm calling js function and see no update in Chrome, after I select '50' with mouse cursor it refreshes with new value '60'. How can I fix it?

Upvotes: 1

Views: 1002

Answers (1)

sadaf2605
sadaf2605

Reputation: 7540

When I have tried it on my own machine it talks about 3 errors:

1.Uncaught TypeError: Cannot set property 'innerHTML' of null test.html:12
2.Unsafe JavaScript attempt to access frame with URL file:///C:/Users/sadaf2605/Downloads/New%20folder/iframe-test.html from frame with URL file:///C:/Users/sadaf2605/Downloads/New%20folder/test.html. Domains, protocols and ports must match.
3. Uncaught TypeError: Cannot call method 'getElementById' of undefined

As number 2 says: Domains, protocols and ports must match. so I think when you will upload it on server this error should not occur since the domain, protocols and ports will be the same in real server.

Upvotes: 1

Related Questions