Page 79 - HTML5
P. 79

<iframe src="base.html" width="800" height="600"></iframe>



        Using Anchors with IFrames


        Normally a change of webpage within an Iframe is initiated from with the Iframe, for example,
        clicking a link inside the Ifame. However, it is possible to change an IFrame's content from outside
        the IFrame. You can use an anchor tag whose href attribute is set to the desired URL and whose
        target attribute is set to the iframe's name attribute.


         <iframe src="webpage.html" name="myIframe"></iframe>
         <a href="different_webpage.html" target="myIframe">Change the Iframe content to
         different_webpage.html</a>


        Using the "srcdoc" Attribute


        The srcdoc attribute can be used (instead of the src attribute) to specify the exact contents of the
        iframe as a whole HTML document. This will yield an IFrame with the text "IFrames are cool!"


         <iframe srcdoc="<p>IFrames are cool!</p>"></iframe>


        If the srcdoc attribute isn't supported by the browser, the IFrame will instead fall back to using the
        src attribute, but if both the src and srcdoc attributes are present and supported by the browser,
        srcdoc takes precedence.


         <iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>


        In the above example, if the browser does not support the srcdoc attribute, it will instead display
        the contents of the base.html page.


        Sandboxing


        The following embeds an untrusted web page with all restrictions enabled


         <iframe sandbox src="http://example.com/"></iframe>


        To allow the page to run scripts and submit forms, add allow-scripts and allow-forms to the sandbox
        attribute.


         <iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>


        If there is untrusted content (such as user comments) on the same domain as the parent web
        page, an iframe can be used to disable scripts while still allowing the parent document to interact
        with it's content using JavaScript.


         <iframe sandbox="allow-same-origin allow-top-navigation"
         src="http://example.com/untrusted/comments/page2">




        https://riptutorial.com/                                                                               63
   74   75   76   77   78   79   80   81   82   83   84