javascripthtmlbuttonproject

How can I make a popup about blank window with an embedded page in it?


I have two sets of code here,

<button onclick="NewTab()">Open</button>

    <script>
        function NewTab() { 
            window.open("random website",
                    "", "width=1150, height=611",'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no');
       }
    </script>

This code will obviously open the window as a popup, pretty simple. Heres the other set of code,

<button onclick="openGame()">Open</button>
<script>
function openGame() {
var win = window.open()
var url = "random website 2","", "width=1000, height=565",'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no'
var iframe = win.document.createElement('iframe')
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = "none";
iframe.src = url
win.document.body.appendChild(iframe)
}
</script>

This code will open the window, but embed it in an about:blank.

Im not really sure how to approach this code, and make them work together so that when you click a button, it will open the window, as a popup like the first code does, but embedded into an about:blank. Is this even possible? if it is, what am I not doing here?


Solution

  • This is actually quite simple. I think you are trying to copy like those classroom6x games where they open in an about:blank. First of all, if your school wifi or blocks or goguardian or whatever has that website you are trying to embed blocked, then you can't really use this or anything else other than a VPN proxy or other wifi to get past the block, as they connection for the iframe will be severed by such services.

    Now onto the real content:

    var win = window.open('about:blank')// <-- include the URL 
    var url = "https://examplewebsite.com"
    var iframe = win.document.createElement('iframe')
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = "none";
    iframe.src = url
    win.document.body.appendChild(iframe)
    
    

    And it's that simple. Keep in mind though, that the website you are embedding, (replace example.com) needs to have CORS set up properly for this to work, or it will refuse to connect.