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 to inject cross-domains HTML inside of a webpage without using an iFrame

User · Answer

You can use object and embed  like so    lt object data  http   www web-source net  width  600  height  400  gt       lt embed src  http   www web-source net  width  600  height  400  gt   lt  embed gt      Error  Embedded data could not be displayed   lt  object gt    Which isn t new  but still works  I m not sure if it has the same functionality though

User · Answer

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  lt div gt  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  amp  amp  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    lt  php   header  Access-Control-Allow-Origin  http   api google com      header  Access-Control-Allow-Origin  http   some example com      gt

User · Answer

You should have a look into JSON-P - that was a perfect solution for me when I had that problem   https   en wikipedia org wiki JSONP  You basically define a javascript file that loads all your data and another javascript file that processes and displays it  That gets rid of the ugly scrollbar of iframes

User · Answer

I created a node module to solve this problem node-iframe-replacement  You provide the source URL of the parent site and CSS selector to inject your content into and it merges the two together   Changes to the parent site are picked up every 5 minutes   var iframeReplacement   require  node-iframe-replacement        add iframe replacement to express as middleware  adds res merge method   app use iframeReplacement       create a regular express route  app get      function req  res           respond to this request with our fake-news content embedded within the BBC News home page      res merge  fake-news                external url to fetch         sourceUrl   http   www bbc co uk news             css selector to inject our content into         sourcePlaceholder   div data-entityid  container-top-stories 1               pass a function here to intercept the source html prior to merging         transform  null               The source contains a working example of injecting content into the BBC News home page

User · Answer

An iframe is still the best way to download cross-domain visual content  With AJAX you can certainly download the HTML from a web page and stick it in a div  as others have mentioned  however the bigger problem is security  With iframes you ll be able to load the cross domain content but won t be able to manipulate it since the content doesn t actually belong to you  On the other hand with AJAX you can certainly manipulate any content you are able to download but the other domain s server needs to be setup in such a way that will allow you to download it to begin with  A lot of times you won t have access to the other domain s configuration and even if you do  unless you do that kind of configuration all the time  it can be a headache  In which case the iframe can be the MUCH easier alternative    As others have mentioned you can also use the embed tag and the object tag but that s not necessarily more advanced or newer than the iframe    HTML5 has gone more in the direction of adopting web APIs to get information from cross domains  Usually web APIs just return data though and not HTML

User · Answer

object is an easy alternative in HTML5   x000D   x000D   lt object data  https   github com AbrarJahin Asp NetCore 3 1-PostGRE Role-Claim Management   width  400  height  300  type  text html  gt      Alternative Content  lt  object gt  x000D   x000D   x000D   You can also try embed   x000D   x000D   lt embed src  https   github com AbrarJahin Asp NetCore 3 1-PostGRE Role-Claim Management   width 200 height 200 onerror  alert  URL invalid          gt  x000D   x000D   x000D   Re- As currently  StackOverflow has turned off support for showing external URL contents  run code snippet is not showing anything  But for your site  it will work perfactly

User · Answer

No  there isn t an equivalent  The  lt iframe gt  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

User · Answer

You can use an XMLHttpRequest to load a page into a div  or any other element of your page really   An exemple function would be   function loadPage    if  window XMLHttpRequest          code for IE7   Firefox  Chrome  Opera  Safari     xmlhttp new XMLHttpRequest     else         code for IE6  IE5     xmlhttp new ActiveXObject  Microsoft XMLHTTP       xmlhttp onreadystatechange function        if  xmlhttp readyState  4  amp  amp  xmlhttp status  200           document getElementById  ID OF ELEMENT YOU WANT TO LOAD PAGE IN   innerHTML xmlhttp responseText           xmlhttp open  POST   WEBPAGE YOU WANT TO LOAD  true   xmlhttp send        If your sever is capable  you could also use PHP to do this  but since you re asking for an HTML5 method  this should be all you need

User · Answer

Basically there are 4 ways to embed HTML into a web page     lt iframe gt  An iframe s content lives entirely in a separate context than your page  While that s mostly a great feature and it s the most compatible among browser versions  it creates additional challenges  shrink wrapping the size of the frame to its content is tough  insanely frustrating to script into out of  nearly impossible to style   AJAX  As the solutions shown here prove  you can use the XMLHttpRequest object to retrieve data and inject it to your page  It is not ideal because it depends on scripting techniques  thus making the execution slower and more complex  among other drawbacks  Hacks  Few mentioned in this question and not very reliable  HTML5 Web Components  HTML Imports  part of the Web Components  allows to bundle HTML documents in other HTML documents  That includes HTML  CSS  JavaScript or anything else an  html file can contain  This makes it a great solution with many interesting use cases  split an app into bundled components that you can distribute as building blocks  better manage dependencies to avoid redundancy  code organization  etc  Here is a trivial example    lt  -- Resources on other origins must be CORS-enabled  -- gt   lt link rel  import  href  http   example com elements html  gt     Native compatibility is still an issue  but you can use a polyfill to make it work in evergreen browsers Today   You can learn more here and here

User · Answer

This also does seem to work  although W3C specifies it is not intended  for an external  typically non-HTML  application or interactive content    lt embed src  http   www somesite com  width 200 height 200   gt    More info  http   www w3 org wiki HTML Elements embed http   www w3schools com tags tag embed asp

[html] Alternative to iFrames with HTML5

Examples related to html

Examples related to iframe