HTML DOM embed object


The HTML DOM embed object is associated with the HTML <embed> element.The <embed> element can be used to embed various external applications like audio, video etc.

Properties

Following are the properties for the HTML DOM embed object −

PropertyDescription
HeightTo set or return the embed element height attribute value.
SrcTo set or return the src attribute value in an embedded element.
TypeTo set or return the type attribute value in an embed element.
WidthTo set or return the width attribute value in an embed element.

Syntax

Following is the syntax for −

Creating an embed object −

var e = document.createElement("EMBED");

Example

Let us look at an example for the embed object −

<!DOCTYPE html>
<html>
<body>
<p>Embed a pdf into this page by clicking the below button</p>
<button onclick="embedObj()">Embed pdf</button>
<br><br>
<script>
   function embedObj() {
      var e = document.createElement("EMBED");
      e.setAttribute("src", "Text-converted.pdf");
      e.width="400px";
      e.height="200px";
      e.style.border="2px solid blue";
      document.body.appendChild(e);
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CREATE button −

In the above example −

We have first created button “Embed pdf” that will execute the embedObj() function when clicked by the user −

<button onclick="embedObj()">Embed pdf</button>

The function embedObj created an <embed> element using the createElement() method of the document body and assigns it to the variable e. We then set the <embed> element height, width, src and border properties. Finally the <embed> element is appended as the document body child using the appendChild() method −

function embedObj() {
   var e = document.createElement("EMBED");
   e.setAttribute("src", "Text-converted.pdf");
   e.width="400px";
   e.height="200px";
   e.style.border="2px solid blue";
   document.body.appendChild(e);
}
raja
Published on 08-Aug-2019 17:57:27
Advertisements