在新的 Window 中加載一個新的 A-Frame 場景

Question

當您單擊按鈕時，我正在嘗試在新的 window 中加載新場景。 為此，當您單擊 HTML 按鈕時，它會打開一個新的 window。

對於那個新的 window，我有以下代碼：

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 包含場景和框，場景也不會加載到新的 window 中。

你知道我該怎么做嗎？

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;

};

但是，新的 window 中的 html 是空的，不會加載新場景。