The HTML <object> data attribute
Unlike the custom data-* attributes, the HTML data attribute on <object> holds the URL of a file to embed. With <object data="report.pdf">, the browser displays that file in place of the element, and shows the content between the tags when it can't.
Overview
The HTML data attribute gives the URL of the file that an <object> element embeds. That file can be a PDF, an image, an SVG drawing or another web page.
What appears depends on the file. Under the HTML standard, an image type such as PNG becomes an image, while HTML, SVG, PDF and other types load into a nested document, much like an <iframe>.
The content between <object> and </object> is fallback content. It shows only when the file can't be displayed, for example after a 404 response, and it can hold another object for the browser to try next.
The value is resolved like a link, so relative paths work, and the data property returns the full URL. That URL stays the same while the embedded page follows its own links, so it keeps naming the file the object loaded rather than the page now on view.
A page's Content Security Policy limits these URLs through its object-src directive. Under object-src 'none', the file is blocked, and the fallback content appears instead.
Syntax
<object data="annual-report.pdf" type="application/pdf"
width="600" height="400">
<a href="annual-report.pdf">Download the annual report (PDF)</a>
</object>Values
| Value |
|---|
| A URL pointing to the resource. |
Example
<p>Press the button to change the first object's data. The second object's file is damaged.</p>
<object id="report" data="data:text/plain,May%20sales%20report" width="200" height="36">
<p>The report could not be shown.</p>
</object>
<p><button type="button" id="june">Load the June report</button></p>
<object data="data:image/png;base64,AAAA" type="image/png" width="200" height="36">
<p>Fallback text from the damaged image</p>
</object>
<p id="msg" role="status"></p>
<script>
const report = document.getElementById('report');
report.addEventListener('load', function () {
const text = decodeURIComponent(report.data.slice(report.data.indexOf(',') + 1));
document.getElementById('msg').textContent = 'The load event fired, and the object now shows "' + text + '".';
});
document.getElementById('june').addEventListener('click', function () {
report.data = 'data:text/plain,June%20sales%20report';
});
</script>Best practices
- Put a download link inside an
<object>whosedatapoints to a PDF. Add a second link outside the element too, since a viewer can load and still fail to display the file. - An object that loads a page or a PDF into a nested document needs a
widthandheight, or it's drawn at 300 by 150 pixels. - Serve the file from your own origin when a script needs to reach inside it. The object's
contentDocumentis null for a file from another origin. - Consider an
<iframe>for embedding web pages. An iframe can cover almost all of object's use cases and offers more security features.
