I'm creating a new popup page through the JavaScript code. The page does not exist, so I want it to be just a temporary page. Example:
if (option == 3){
var myPopup = window.open("", "", "width=350, height=300");
myPopup.addEventListener('load', function() {
console.log("received load event");
}, true);
}
This popup only appears through a checkbox. How can I add elements to the page, such as input text, buttons, etc.
akm, if you really need to open a new window, I think it's best to create a document in memory with the desired HTML:
var tmplPopUp = document.getElementById("tmplPopUp");
var abrirPopUp = document.getElementById("abrirPopUp");
abrirPopUp.addEventListener("click", function () {
var blobPopUp = new Blob([tmplPopUp.innerHTML], { type: 'text/html' });
var urlPopUp = URL.createObjectURL(blobPopUp);
var popUp = window.open(urlPopUp, "", "width=350, height=300");
popUp.addEventListener("load", function (event) {
var label1 = popUp.document.getElementById("label01");
var label2 = popUp.document.getElementById("label02");
var enviar = popUp.document.getElementById("enviar");
console.log(label1, label2, enviar);
});
});<input id="abrirPopUp" type="button" value="Abrir PopUp" />
<template id="tmplPopUp">
<div>
<label>
Label 01:
<input id="label01" type="text" />
</label>
</div>
<div>
<label>
Label 02:
<input id="label02" type="text" />
</label>
</div>
<div>
<label>
<input id="enviar" type="button" value="Enviar" />
</label>
</div>
</template>The above code will not work due to an OS limitation, you can see the same working in the JSFiddle
If you need to add elements in PopUp after it has been loaded, you can manipulate the document of it.
var tmplPopUp = document.getElementById("tmplPopUp");
var abrirPopUp = document.getElementById("abrirPopUp");
abrirPopUp.addEventListener("click", function () {
var blobPopUp = new Blob([tmplPopUp.innerHTML], { type: 'text/html' });
var urlPopUp = URL.createObjectURL(blobPopUp);
var popUp = window.open(urlPopUp, "", "width=350, height=300");
popUp.addEventListener("load", function (event) {
var label1 = popUp.document.getElementById("label01");
var label2 = popUp.document.getElementById("label02");
var enviar = popUp.document.getElementById("enviar");
var label3 = {};
label3.div = popUp.document.createElement("div");
label3.label = popUp.document.createElement("label");
label3.textNode = popUp.document.createTextNode("Label 03: ");
label3.input = popUp.document.createElement("input");
label3.input.id = "label03";
label3.input.type = "text";
label3.label.appendChild(label3.textNode);
label3.label.appendChild(label3.input);
label3.div.appendChild(label3.label);
enviar.parentNode.insertBefore(label3.div, enviar);
var label3 = popUp.document.getElementById("label03");
console.log(label1, label2, label3, enviar);
});
});<input id="abrirPopUp" type="button" value="Abrir PopUp" />
<template id="tmplPopUp">
<div>
<label>
Label 01:
<input id="label01" type="text" />
</label>
</div>
<div>
<label>
Label 02:
<input id="label02" type="text" />
</label>
</div>
<div>
<label>
<input id="enviar" type="button" value="Enviar" />
</label>
</div>
</template>In the example above, I added a third input ... again, if you'd like to see the same one working, you'll need to check the JSFiddle