在新窗口中加载新的A帧场景

Question

当您单击按钮时，我正在尝试在新窗口中加载新场景。为此，当您单击HTML按钮时，它将打开一个新窗口。

对于那个新窗口，我有以下代码：

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);

但是，即使新的HTML包含场景和框，场景也不会在新窗口中加载。

你知道我该怎么办吗？

Answer 1

因此，基本上，使用子文档并在加载后添加元素

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

我的js文档：

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;

};

但是，新窗口中的html为空，并且不会加载新场景。