动态更新X3DOM模型中的纹理

Question

I am developing a Web 3D app and I produced some code in Javascript that implements the following tag to an external .html file with the model in it, within an iframe.

In the <appearance> element in the X3D code block of the external .html file:

<texture id="XXX" repeats="true" repeatt="true" url="" scale="true"
hidechildren="true">
<img src="" attr=".../BMW.jpg" style="display: none; visibility: hidden;">
</texture>

Javascript code that places the above code in the appropriate block in the iframe after I click on a button:

ogl = true;
function toggleTexture(){
if (!ogl) {
    var t = document.createElement("Texture");
    t.setAttribute("id", "XXX");
    t.setAttribute("repeatS", "true");
    t.setAttribute("repeatT", "true");
    var imgElement = document.createElement("img");
    imgElement.setAttribute("src", "../HomeFurniture/assets/BMW.jpg");
    t.appendChild(imgElement);

    var iframe = document.getElementById("frame");
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
    innerDoc.getElementById("anApp").appendChild(t);
    innderDoc.x3dom.reload();
} else {
    var iframe = document.getElementById("frame");
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
    var ot = innerDoc.getElementById("anApp");
    ot.removeChild(innerDoc.getElementById('XXX'));
}

return false;
}

The result in the debugging of Chrome browser shows that the piece of code needed is inserted, but the actual model is not updated with the appropriate texture.

There must be something that I miss, but I cannot find the solution. Any help would be appreciated.

Answer 1

FIXED: The problem was Google Chrome. I tested the Web app in Mozilla Firefox and everything works :)

Additionally, I tried the Javascript code in the child html file and it works in Chrome. It just refuses to work when the parent html file load the child html file within an iframe block.