Alternatives to iFrame tag in HTML?

I would like to know what are the possible alternatives to iFrame, inside which I can inject Coss domain html(without iframe)? Or you can say I want to show HTML page without using iFrame in a Div

Asked by:- pika
: 9909 At:- 2/23/2018 7:23:37 AM
HTML iframe alternative embed web page without iframe

3 Answers
profileImage Answered by:- jon

Although is not equivalent of iFrame but you can use these :

1. you can use <embed> element

<embed id="123" src="" />

works fine in chrome ,safari and firefox, to make it work in firefox, you need wrap it with object

<object data="url" type=text/html>
   <embed src="url" id=123>

2.  Another way is to Use AJAX call and load the URL into div , like below example

$("#area").load("example.html #content");

That finds the content in the file example.html within the element with an ID of contentand puts it on to the current page, inside the element with an ID of area.

3. HTML Imports

You can import external HTML file

<!-- Resources on other origins must be CORS-enabled. -->

<link rel="import" href="">

In this way, you can also divide HTML components and re-use same html code.

At:- 2/23/2018 8:52:19 AM Updated at:- 10/6/2022 6:52:27 AM

profileImage Answered by:- Vinnu

Content inside iFrame is not indexed by Google and hence no good for SEO, so to avoid it best solution will be jQuery method like below

  <div id='include-from-outside'></div>
    <script type='text/javascript'>

This will include paste html from url inside div with id='include-from-outside'

At:- 2/23/2018 4:03:21 PM

profileImage Answered by:- vikas_jk

I would like to add one more way, since "HTML Import" is obsolete now in most of the major browsers, you can use Javascript's "fetch" to get external HTML into the page.

This can be the example of it

class SampleComponent extends HTMLElement {

    async connectedCallback() {
        let res = await fetch( 'your-component.html' )

        this.innerHTML = await res.text()

customElements.define('your-component', SampleComponent)

Since, 'fetch' is an asynchronous function so you will have to use async/await or Promises, as shown above, thanks

At:- 9/28/2020 1:48:53 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use