Home > Developer > JavaScript
1. Embed another HTML document
The IFRAME element allows another document to be embedded in an existing HTML document. The following code shows the use of the IFRAME element:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Author"content= "from Luka" /> <Metaname= "description"content= "A Simple Example" /> <title>Example</title></Head><Body><Header> <H1>Things I like</H1> <nav> <ul> <Li> <ahref= "img-map.html" target= "MyFrame" >Products I Like</a> </Li> <Li> <ahref= "animated-menu.html" target= "MyFrame" >Buttons I like</a> </Li> </ul> </nav></Header> <iframe name= "MyFrame" width= " height " = "+" ></ iframe> </Body></HTML>
In this example, create an IFRAME with the Name property of MyFrame. This creates a browse context named MyFrame. You can then use this browsing context with the target property of other elements, specifically a, form, button, input, and base. This creates a pair of hyperlinks with the A element, which loads the specified URL in the href attribute into the IFRAME. You can see the effect as shown:
The width and Height properties specify the pixel dimensions. The src attribute specifies the URL that should be loaded and displayed at the beginning of the IFRAME, while the Srcdoc property allows you to define an HTML document for inline display.
HTML5 introduces two new IFRAME element attributes. The first is seamless, which instructs the browser to display the contents of the IFRAME as an integral part of the main HTML document. As you can see, there is a border by default, and a scroll bar appears if the content is larger than the size specified by the width and Height properties. The second property is a sandbox, which restricts HTML documents. If you apply this property with no value attached, it will look like this:
<sandbox name= "MyFrame" width= " height " = "+" ></ iframe >
The following elements will be disabled:
1. Scripts
2. Forms
3. Plugins
4. Links to other browsing contexts
In addition, the contents of the IFrame are considered to be different from the rest of the HTML document, which raises additional security measures. You can enable various functions independently by defining the values of the Sandbox property, like this:
<sandbox= "allow-forms" name= "MyFrame" width = " All" height= "></iframe">
Describes the values that you can use:
2. Embed content via plugins
The object and EMBED elements are initially used as a way to extend the browser's capabilities to add plug-in support, and plug-ins can handle content that the browser does not directly support.
2.1 Using the EMBED element
The following code shows the use of the EMBED element.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Example</title></Head><Body><Embedsrc= "http://player.youku.com/player.php/sid/XMTYwMjY1MTE4OA==/v.swf"type= "Application/x-shockwave-flash"width= "480"Height= "The "allowFullScreen= "true" ></Embed></Body></HTML>
The SRC attribute specifies the address of the content, and the Type property specifies the MIME type of the content so that the browser knows what to do with it. The width and Height properties determine the amount of space the embedded content will occupy on the screen. Any other properties of the app will be used as parameters to the plugin or content. In this example, a property named allowFullScreen is applied , and the Youku video player uses it to enable the full-screen viewing function. From here we can see how the browser renders this content.
2.2 Using the object and Param elements
The object element implements the same effect as the embed element, but it works slightly differently and with some extra functionality.
The following code shows how to embed the Youku video in the previous example with the object element:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Example</title></Head><Body>< Object width= "480"Height= "The "Data= "http://player.youku.com/player.php/sid/XMTYwMjY1MTE4OA==/v.swf"type= "Application/x-shockwave-flash"> <paramname= "allowFullScreen"value= "true" /></Object></Body></HTML>
The Data property provides the address of the content, with the type, width, and height properties consistent with the meaning in the EMBED element. Use the Param element to define the parameters that will be passed to the plug-in, and each parameter that needs to be defined uses one PARAM element.
2.3 Object Specifies alternate content
One of the great advantages of the object element is that it can contain alternate content that is displayed when the specified content is not available. The following code provides a simple demonstration.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Example</title></Head><Body><Objectwidth= "480"Height= "The "Data= "Http://www.cnblogs.com/luka/joke"> <paramname= "allowFullScreen"value= "true" /> <b>sorry!</b>We can ' t display this content</Object></Body></HTML>
In this example, the Data property references a file that does not exist. The browser tries to load the nonexistent content, and if it fails, it displays the contents of the object element instead. The Param element is ignored, leaving only the phrase and stream content to be displayed, as shown in:
Note that you have removed the type attribute in the code listing. When the type attribute does not exist, the browser attempts to determine its content type from the data itself. For certain plugins on some browsers, the plugin will be loaded even if the data does not exist. This means that a blank area is displayed on the screen instead of the alternate content.
"Javascript Basics" embed another HTML document, embed content through plugins
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
