Load a new A-Frame Scene in new Window

Question

I'm trying to load a new scene in a new window when you click a button. For that, when you click on HTML button it opens a new window.

For that new window, I have below code:

let newWindow = window.open();    // Open a new window 

let newHead = newWindow.document.head;
let newBody = newWindow.document.body;

let charset = document.createElement('meta');
charset.setAttribute('charset', 'UTF-8');

let aframe_script_1 = document.createElement('script');
aframe_script_1.setAttribute('src','https://aframe.io/releases/0.9.0/aframe.min.js');

let jquery_script_1 = document.createElement('script');        
jquery_script_1.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');

newHead.appendChild(charset);
newHead.appendChild(aframe_script_1);
newHead.appendChild(jquery_script_1);


let escena2 = document.createElement ('a-scene');

entidadBox2.setAttribute("id","box");
let geometry = "primitive:box";
entidadBox2.setAttribute("geometry","primitive:box");
entidadBox2.setAttribute("color", "#EF2D5E");
entidadBox2.object3D.position.set(0, 1.25, -5);

escena2.appendChild(entidadBox2);

newBody.appendChild(escena2);

However, the scene doesn't load in new window even though the new HTML contains the scene and the box.

Do you know how can I do it?

Answer 1

So basically, use the child document and add element after it is loaded

let newWindow = window.open();    // Open a new window 

newWindow.onload = function () {
    let doc = newWindow.document;
    let newHead = newWindow.document.head;
    let newBody = newWindow.document.body;

    let charset = doc.createElement('meta');
    charset.setAttribute('charset', 'UTF-8');

    let aframe_script_1 = doc.createElement('script');
aframe_script_1.setAttribute('src','https://aframe.io/releases/0.9.0/aframe.min.js');

    let jquery_script_1 = doc.createElement('script');        
jquery_script_1.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');

    newHead.appendChild(charset);
    newHead.appendChild(aframe_script_1);
    newHead.appendChild(jquery_script_1);

    let escena2 = doc.createElement ('a-scene');

    entidadBox2.setAttribute("id","box");
    let geometry = "primitive:box";
    entidadBox2.setAttribute("geometry","primitive:box");
    entidadBox2.setAttribute("color", "#EF2D5E");
    entidadBox2.object3D.position.set(0, 1.25, -5);

    escena2.appendChild(entidadBox2);

    newBody.appendChild(escena2);
}

Answer 2

My js document:

window.onload = function() {

     function showAlert() {
        console.log("Start showAlert");
        let newWindow = window.open();

        newWindow.onload = function() {
            console.log("Start new Window");
            let newHead = newWindow.document.head;
            let newBody = newWindow.document.body;

            let charset = document.createElement('meta');
            charset.setAttribute('charset', 'UTF-8');

            let aframe_script_1 = document.createElement('script');          aframe_script_1.setAttribute('src','https://aframe.io/releases/1.0.3/aframe.min.js');

            let jquery_script_1 = document.createElement('script');          jquery_script_1.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');

            newHead.appendChild(charset);
            newHead.appendChild(aframe_script_1);
            newHead.appendChild(jquery_script_1);
            console.log("Start 1");

            let scene = document.createElement ('a-scene');
            //escena2.setAttribute("embedded",true);
            //escena2.style.height="300px";
            //.style.width="50%";
            let entidadBox2 = document.createElement ('a-box');
            entidadBox2.setAttribute("id","box");
            //let geometry = "primitive:box";
            entidadBox2.setAttribute("geometry","primitive:box");
            entidadBox2.setAttribute("color", "#EF2D5E");
            entidadBox2.object3D.position.set(0, 1.25, -5);
            scene.appendChild(entidadBox2);

            console.log("Start 2");
            newBody.appendChild(scene);
        }

    } 


    let elemBoton = document.createElement("button");
    //elemBoton.setAttribute("type","button");
    elemBoton.setAttribute("class","btn btn-primary btn-lg");
    elemBoton.innerHTML = "Pulse";
    elemBoton.setAttribute("style", "position:absolute;top:150px;right:60px;");
    elemBoton.onclick = showAlert;

};

However, the html in the new window is empty and it doesn't load the new scene.