Alternative to iFrames with HTML5

Question

I would like to know if there is an alternative to iFrames with HTML5. I mean by that, be able able to inject cross-domains HTML inside of a webpage without using an iFrame.

Answer 1

You can use object and embed, like so:

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

Which isn't new, but still works. I'm not sure if it has the same functionality though.

Answer 2

No, there isn't an equivalent. The <iframe> element is still valid in HTML5. Depending on what exact interaction you need there might be different APIs. For example there's the postMessage method which allows you to achieve cross domain javascript interaction. But if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do.

Answer 3

If you want to do this and control the server from which the base page or content is being served, you can use Cross Origin Resource Sharing (http://www.w3.org/TR/access-control/) to allow client-side JavaScript to load data into a <div> via XMLHttpRequest():

// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();

Now for the lynchpin of this whole operation, you need to write code for your server that will give clients the Access-Control-Allow-Origin header, specifying which domains you want the client-side code to be able to access via XMLHttpRequest(). The following is an example of PHP code you can include at the top of your page in order to send these headers to clients:

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

Answer 4

Although there isn't any perfect replacement I have been working on something, it's built be-be easy and I'm happy to say it works (thanks to junkfoodjunkie)

Basically, my current system uses some basic php/server combo to load and then save the file to the server, I just started up the project today so only the main file (such as index.html) is loaded. I'll be working to make it load 50 ish links from the page to help with support. If you would like to test it: it is hosted here. To use it is easy, just load the URL http://integratedmedia.ml/get/?link= and add your page to the end. no need to add in https or www. It will also cause problems if you do :) Anyways if you follow that set your copied page will be found at integratedmedia.ml/get/gettmp/YOURURL.html. Here is an example:

integratedmedia.ml/get/?link=google.com

the downloaded file is now at

integratedmedia.ml/get/gettmp/google.com.html

Answer 5

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

Answer 6

object is an easy alternative in HTML5:

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

You can also try embed:

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />