1. The iframe element represents a nested browsing context

1. src
   1. The src attribute gives the address of a page that the nested browsing context is to contain
   2. The attribute, if present, must be a valid non-empty URL potentially surrounded by spaces
2. srcdoc
   1. Inline HTML to embed, overriding the src attribute
   2. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute
3. name
   1. A targetable name for the embedded browsing context
   2. This can be used in the target attribute of
      1. a
      2. form
      3. base
      or the formtarget attribute of elements
      1. input
      2. button
      or the windowName param in window.open()
   3. The name attribute, if present, must be a valid browsing context name
   4. The given value is used to name the nested browsing context.
   5. When the browsing context is created, if the attribute is present, the browsing context name must be set to the value of this attribute;
      otherwise, the browsing context name must be set to the empty string.
   6. To link to a browsing context from an anchor tag use target=name
      (not target=id)
4. sandbox
   1. The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe
   2. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions
   3. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.
   4. Some allowed values are
      1. allow-same-origin
      2. allow-top-navigation
      3. allow-forms
      4. allow-scripts
5. seamless
   Deprecated
6. width
   1. The width of the frame in CSS pixels
   2. Default is 300
7. height
   1. The height of the frame in CSS pixels
   2. Default is 150
8. iframe stands for inline frame! (If you want to center, may need to use display:block!)

HTML

    <iframe width="425" height="350" 
            name="myIframe" 
            src="./origin_species_sample.html"
            sandbox="allow-scripts">
    </iframe>
    <br>
    <a href="https://tomgdow.com" target="myIframe">tomgdow</a>
    <a href="https://ecss.tomgdow.com/" target="myIframe">ecss</a>
    <a href="./alice_in_wonderland_sample.html" target="myIframe">Alice in Wonderland</a>
    <a href="./origin_species_sample.html" target="myIframe">Origin Species</a>

Browser

Notes

HTML

    <iframe width="425" height="350" 
        name="myIframe2" 
        src="./alice_in_wonderland_sample.html"
        sandbox>
    </iframe>

    <br>
    <a href="https://tomgdow.com" target="myIframe2">tomgdow</a>
    <a href="https://ecss.tomgdow.com/" target="myIframe2">ecss</a>
    <a href="./alice_in_wonderland_sample.html" target="myIframe2">Alice</a>
    <a href="./origin_species_sample.html" target="myIframe2">Origin Species</a>

Browser

Notes

HTML

    <iframe width="425" height="350" 
        name="myIframe3"
        src="./html/alice_in_wonderland_sample.html"
        srcdoc="<div style=font-size:1.5em;>hello iWorld</div>">
    </iframe>

JavaScript

    window.addEventListener("load", function () {
        document.querySelectorAll('iframe')[2]\
        .contentDocument.body.style.color = '#FFFFFF';
        document.querySelectorAll('iframe')[2]\
        .contentDocument.body.style.backgroundColor = '#18836f';
    });

Browser

Notes

HTML

    <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19080.618943055015!2d-6.772560840429293!3d53.28814911621078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48677c2bcd0c6145%3A0xa00c7a997318440!2sCurryhills%2C%20Prosperous%2C%20Co.%20Kildare!5e0!3m2!1sen!2sie!4v1604437776571!5m2!1sen!2sie"
        width="600" height="450" 
        frameborder="0" 
        style="border:0;" 
        allowfullscreen=""
        aria-hidden="false" 
        tabindex="0">
    </iframe>
                            

Browser

HTML

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/NMWzgy8FsKs?si=EaAfp0YpylewQ2DZ"
    title="YouTube video player" 
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
    picture-in-picture; web-share"
    style="border:0;" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen>
</iframe>

Browser