iframe vs embed vs object in HTML 5

-
HTML5 - Embedded content

<iframe> vs <embed> vs <object>

Embed, object and iframe tags are used to embed external resources in html document.

<iframe>


Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well.

  <iframe id="myFrame" frameborder="0" allowtransparency="true" src="report.html" width="100%" height="700" style="border:none;">
  </iframe> 


Pros:


·         The <iframe>'s strength is that the embedded code is 'live' and can communicate with the parent document.

Cons:

·         Iframes Bring Security Risks:
o   A malicious user can run a plug-in, change the source site URL, hijack your users' clicks
·         Iframe Cause Usability Issues:
o    It break the browsers' "Back & Forward" button.
o   Every <iframe> in a page requires increased memory and other computing resources
o   No way to link directly to a page that contains anything other than the initial iframe url.

Alternative to iFrames in HTML5


<embed>

Everything old is new again. EMBED was reinstated in HTML5.
Standardized in HTML 5, before that it was a nonstandard tag, which admittedly was implemented by all major browsers.
The <embed> tag is used for embedding an external (typically non-HTML) application or interactive content into an HTML document.
<embed type="text/html" src="report.html" width="100%" height="700">
<embed type="video/webm" src="video.mp4" width="400" height="300">

The src attribute accepts URL of the embedded resource between the double quotes.
The type attribute accepts the MIME type of the embedded resource.

Pros

·         With <embed> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc.

Cons

·         Backward compatible issue with embed tag as this is not standard tag prior to HTML5.

 <object>

The tag OBJECT is a bit older than IFRAME and EMBED and works under HTML 4.01 as well. The syntax to make it work is:
<object data="report.htm" style="width:680px; height:500px; overflow:auto;"></object>

The <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin

Comments

Post a Comment

Popular posts from this blog

Constructor in c#

-
Question: W hat is the output of the below code?  namespace ConsoleApplication1 {     class A     {         public A()         {             Console .WriteLine( "A.Constructor" );         }         public A( string abc)         {             Console .WriteLine( "A.Constructor " + abc);         }         public void Show()         {             Console .WriteLine( "A.Show()" );         }     }     class B ...
Read more

What is the need of method overriding ???

-
When we need to extend the Parents class method's behavior with some modifications. This is the situation where we inherit the class and override the methods which are required as per our business requirement. namespace testApp {     abstract class Employee     {         public int EmployeeID { get ; set ; }         public String EmployeeName { get ; set ; }         public double BasicSalary { get ; set ; }         abstract public void CalculateSalary();     }     class PermanentEmployee : Employee     {         public override void CalculateSalary()         {             double HRA = 20 * Basic...
Read more