FileNav

online
online: /HTML & CSS/HTML5.1_Notes.md

HTML 5.1 Notes

Third-Party JavaScript Development: The Future!

New Attributes

iFrame sandbox attribute

Third-Party JavaScript Development: The Future! - iFrame sandbox attribute
WHATWG (Web Hypertext Application Technology Working Group) > The iframe element > The sandbox attribute

<iframe sandbox src="http://evil.example.com/page.html"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://maps.example.com/embedded.html"></iframe>

The sandbox attributes possible values are

iFrame srcdoc attribute

Third-Party JavaScript Development: The Future! - iFrame srcdoc attribute
WHATWG (Web Hypertext Application Technology Working Group) > The iframe element > The srcdoc attribute

<article>
    <h1>I got my own magazine!</h1>
    <p>
        After much effort, I've finally found a publisher, and so now I have my own magazine! Isn't that awesome?!
        The first issue will come out in September, and we have articles about getting food,
        and about getting in boxes, it's going to be great!
    </p>
    <footer>
        <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.</p>
    </footer>
    <article>
        <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
        <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
    </article>
    <article>
        <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
        <iframe seamless sandbox srcdoc="<p>Yeah, you can see it
<a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
    </article>
    <article>
        <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
        <iframe seamless sandbox srcdoc="<p>hey that's earl's table.</p>
<p>you should get earl&amp;amp;me on the next cover.</p>"></iframe>
    </article>
</article>

Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be doubly escaped — once so that the ampersand is preserved when originally parsing the srcdoc attribute, and once more to prevent the ampersand from being misinterpreted when parsing the sandboxed content.

iFrame seamless property

Third-Party JavaScript Development: The Future! - iFrame seamless attribute
WHATWG (Web Hypertext Application Technology Working Group) > The iframe element > The seamless attribute

<iframe src="http://bocoup.com" seamless></iframe>

It instructs modern browsers to treat the iFrame’s content more like inline markup than it would otherwise. Specifically, this means:

Style scoped attribute

Third-Party JavaScript Development: The Future! - Style scoped Attribute
W3C (World Wide Web Consortium)

This is a method for limiting the effect of styling to the element it is defined within. It is used like so:

<div class="container">
    <style scoped>
        p { color: red; }
    </style>
    <p>This paragraph has red text.<p>
</div>
<p>This paragraph does not.</p>

New Elements

Security Updates