Change Javascript Window.Open to open an Iframe

Question

I have this javascript, and I want to do that instead of opening a new window, it opens an iframe.

---

 window.self.name = "emanager";
 function MostraBarra(){
 if (document.incluir.balancete_arquivo.value != ""){
 window.open('<%=BARRASTATUS%>','upload','width=400,height=150');
 }
 return true;
 }

Answer 1

An iframe is not something that "opens" in the same way that a window opens. It is an HTML tag that you insert into the page and load another page.

What you can do is insert the tag where you want on the page without specifying a URL and in a hidden way with display: none;:

<iframe style="display: none;"></iframe>

In the function you change the visibility of the iframe and defines a src which will be the page to be loaded:

function MostraBarra(){
   if (document.incluir.balancete_arquivo.value != ""){
//      window.open('<%=BARRASTATUS%>','upload','width=400,height=150');
      var iframe = document.querySelector("iframe"); // seleciona o iframe pela tag
      iframe.style.display = "block"; // altera o display tornado-o visível
      iframe.src = "<%=BARRASTATUS%>"; // carrega uma página no iframe
   }
   return true;
}

There you can define the styles of iframe via CSS the way you want it:

iframe{
   width: 100%;
   height: 400px;
   border: none;
}

Other properties of iframe you can check on MDN documentation.

Answer 2

You only need to make one

if (document.incluir.balancete_arquivo.value != ""){
    var frame = document.getElementById('iframe') //Id do seu iframe aqui
    frame.src = '<%=BARRASTATUS%>'; // Considerando que BARRASTATUS 
                                   //  tenha o url que vai ser passado pro frame
}

Having this, the iframe will already load the other screen; Now, you need to set the size, visibility, etc...

Answer 3

Javascript

function prepareFrame() {
    if (document.incluir.balancete_arquivo.value != ""){
       var ifrm = document.createElement("iframe");
       ifrm.setAttribute("src", "<%=BARRASTATUS%>");
       ifrm.style.width = "400px";
       ifrm.style.height = "150px";
       document.body.appendChild(ifrm);
   }
}

HTML

<button type="button" onclick="prepareFrame()">Criar iframe</button>

To create iframe in exact location:

function prepareFrame() {
    var ifrm = document.createElement("iframe"); 
    ifrm.setAttribute("src", "radioalfa2233.htm");
    ifrm.style.width = "400px";
    ifrm.style.height = "150px";
    //o iframe será criado antes da div de id = divqq
    var divReferencia = document.getElementById("divqq");
    // adiciona o novo elemento criado e seu conteúdo ao DOM
    document.body.insertBefore(ifrm, divReferencia);
}

and in HTML insert this div <div id="divqq"></div> at the exact place where the iframe should be created

In case you want to hide the button after clicked

add this line inside the if in the script

document.getElementById('bt').style.display = 'none';

and the id on the button <button id="bt"....

• The function createElement() create an HTML element to insert into an HTML document
• Apparently, the function createElement() it has no effect, we need to apply the method appendChild() so that the element is effectively inserted into the HTML document and is visible to the user.