'How can I embed an iframe correctly with JavaScript?

How can I embed an iframe using JavaScript, that's being displayed where the code's being added? The code below displays the iframe ONLY above the footer, no matter where I add the code, whether it's in the header or the body.

var iframe_tag = document.createElement("iframe");
iframe_tag.setAttribute("src", "https://wikipedia.com");
iframe_tag.style.width = "100%";
iframe_tag.style.height = "480px";
document.body.appendChild(iframe_tag);

I know there are simpler ways to show an iframe, but I can only use JavaScript.

javascripthtmliframe


Solution 1:[1]

When you use document.body.appendChild it is identical to just writing in the new html at the bottom, or literly appending the element to the bottom
This means that regardless of where the script is, it will always do this instead you should append to a predefined div (<div id="iframecontainer"> </div>)

let container = document.getElementById("iframecontainer");
container.appendChild(iframe_tag);

minimal example: 

<!DOCTYPE html>
<html>
    <body>
        <script>
            let iframe = document.createElement("iframe");
            iframe.src = "https://wikipedia.com/";
            window.onload = () => {
                document.body.appendChild(iframe);
            }
        </script>
    </body>
</html

In my opinion you should, instead of creating an appending an element, just set the src of a pre-existing iframe (<iframe id="iframe"> </iframe>)

let iframe_tag = document.getElementById("iframe");
iframe.src = "https://wikipedia.com";

minimal example: 

<!DOCTYPE html>
<html>
    <body>
        <iframe id="iframe"> </iframe>
        <script>
            let iframe;
            window.onload = () => {
                iframe = document.getElementById("iframe");
                iframe.src = "https://www.wikipedia.com/";
            }
        </script>
    </body>
</html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions