Alternatif untuk iFrames dengan HTML5

Saya ingin tahu apakah ada alternatif untuk iFrames dengan HTML5. Maksud saya, dapat menyuntikkan lintas-domain HTML di dalam halaman web tanpa menggunakan iFrame.

Pada dasarnya ada 4 cara untuk menanamkan HTML ke halaman web:

• <iframe>Konten iframe sepenuhnya hidup dalam konteks yang terpisah dari halaman Anda. Meskipun sebagian besar fitur yang hebat dan paling kompatibel di antara versi browser, itu menciptakan tantangan tambahan (menyusut membungkus ukuran frame dengan kontennya sulit, sangat frustasi untuk skrip ke dalam / keluar dari, hampir mustahil untuk gaya).
• AJAX . Sebagai solusi yang ditunjukkan di sini membuktikan, Anda dapat menggunakan XMLHttpRequestobjek untuk mengambil data dan menyuntikkannya ke halaman Anda. Ini tidak ideal karena tergantung pada teknik scripting, sehingga membuat eksekusi lebih lambat dan lebih kompleks, di antara kelemahan lainnya .
• Hacks . Beberapa yang disebutkan dalam pertanyaan ini dan tidak terlalu dapat diandalkan.

• Komponen Web HTML5 . Impor HTML, bagian dari Komponen Web, memungkinkan untuk bundel dokumen HTML dalam dokumen HTML lainnya. Itu termasuk HTML, CSS, JavaScriptatau apa pun sebuah .htmlfile yang dapat berisi. Ini membuatnya menjadi solusi hebat dengan banyak kasus penggunaan yang menarik: memecah aplikasi menjadi komponen yang dibundel yang dapat Anda distribusikan sebagai blok bangunan, mengelola dependensi dengan lebih baik untuk menghindari redundansi, organisasi kode, dll. Ini adalah contoh sepele:

  <!-- Resources on other origins must be CORS-enabled. -->
  <link rel="import" href="http://example.com/elements.html">

Kompatibilitas asli masih menjadi masalah, tetapi Anda dapat menggunakan polyfill untuk membuatnya berfungsi di browser yang hijau Today.

Anda dapat mempelajari lebih lanjut di sini dan di sini .

Anda dapat menggunakan objek dan embed, seperti:

<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>

Yang bukan baru, tetapi masih berfungsi. Saya tidak yakin apakah itu memiliki fungsi yang sama.

Tidak, tidak ada yang setara. The <iframe>elemen masih berlaku di HTML5. Bergantung pada interaksi persis apa yang Anda butuhkan, mungkin ada API yang berbeda. Misalnya ada postMessagemetode yang memungkinkan Anda untuk mencapai interaksi javascript lintas domain. Tetapi jika Anda ingin menampilkan konten HTML lintas domain (ditata dengan CSS dan dibuat interaktif dengan javascript) iframetetap sebagai cara yang baik untuk dilakukan.

object adalah alternatif yang mudah di 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>

Anda juga dapat mencoba embed:

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />

Jika Anda ingin melakukan ini dan mengontrol server dari mana halaman dasar atau konten dilayani, Anda dapat menggunakan Cross Origin Resource Sharing ( http://www.w3.org/TR/access-control/ ) untuk memungkinkan klien- sisi JavaScript untuk memuat data ke <div>melalui 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();

Sekarang untuk lynchpin dari seluruh operasi ini, Anda perlu menulis kode untuk server Anda yang akan memberikan Access-Control-Allow-Originheader kepada klien , menentukan domain mana yang Anda inginkan untuk diakses oleh kode sisi klien XMLHttpRequest(). Berikut ini adalah contoh kode PHP yang dapat Anda sertakan di bagian atas halaman Anda untuk mengirim header ini ke klien:

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

Ini juga tampaknya berfungsi, meskipun W3C menyatakan itu tidak dimaksudkan "untuk aplikasi eksternal (biasanya non-HTML) atau konten interaktif"

<embed src="http://www.somesite.com" width=200 height=200 />

Info lebih lanjut: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Iframe masih merupakan cara terbaik untuk mengunduh konten visual lintas domain. Dengan AJAX Anda tentu dapat mengunduh HTML dari halaman web dan menempelkannya pada div (seperti yang disebutkan orang lain) namun masalah yang lebih besar adalah keamanan. Dengan iframe Anda akan dapat memuat konten lintas domain tetapi tidak akan dapat memanipulasinya karena konten tersebut sebenarnya bukan milik Anda. Di sisi lain dengan AJAX Anda tentu saja dapat memanipulasi konten apa pun yang dapat Anda unduh, tetapi server domain lain perlu diatur sedemikian rupa sehingga memungkinkan Anda untuk mengunduhnya. Sering kali Anda tidak akan memiliki akses ke konfigurasi domain lain dan bahkan jika Anda melakukannya, kecuali jika Anda melakukan konfigurasi seperti itu sepanjang waktu, itu bisa menjadi sakit kepala. Dalam hal ini iframe bisa menjadi alternatif yang JAUH lebih mudah.

Seperti yang telah disebutkan orang lain, Anda juga dapat menggunakan tag embed dan tag objek tetapi itu belum tentu lebih maju atau lebih baru dari iframe.

HTML5 lebih mengarah pada adopsi API web untuk mendapatkan informasi dari lintas domain. Biasanya API web hanya mengembalikan data dan bukan HTML.

Anda dapat menggunakan XMLHttpRequest untuk memuat halaman ke div (atau elemen lain dari halaman Anda). Contoh fungsi adalah:

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 && 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();
}

Jika server Anda mampu, Anda juga bisa menggunakan PHP untuk melakukan ini, tetapi karena Anda meminta metode HTML5, ini yang Anda butuhkan.

Saya membuat modul simpul untuk menyelesaikan masalah ini simpul-iframe-penggantian . Anda memberikan URL sumber dari situs induk dan pemilih CSS untuk menyuntikkan konten Anda dan menggabungkan keduanya.

Perubahan ke situs induk diambil setiap 5 menit.

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
    });
});

Sumber tersebut berisi contoh kerja menyuntikkan konten ke beranda BBC News .

Anda harus melihat JSON-P - itu solusi sempurna bagi saya ketika saya memiliki masalah itu:

https://en.wikipedia.org/wiki/JSONP

Anda pada dasarnya mendefinisikan file javascript yang memuat semua data Anda dan file javascript lain yang memproses dan menampilkannya. Itu menghilangkan scrollbar iframe yang jelek.