HTML5 ile iFrames'e alternatif

HTML5 ile iFrames için bir alternatif olup olmadığını bilmek istiyorum. Yani, iFrame kullanmadan bir web sayfasının içine etki alanları arası HTML enjekte edebiliyoruz.

Temel olarak HTML'yi bir web sayfasına yerleştirmenin 4 yolu vardır:

• <iframe>Bir iframe'in içeriği tamamen sayfanızdan ayrı bir bağlamda yaşar. Bu çoğunlukla harika bir özellik olsa da ve tarayıcı sürümleri arasında en uyumlu olsa da, ek zorluklar yaratır (çerçevenin boyutunu içeriğine küçültmek zor, komut dosyası oluşturmak / çıkarmak için delicesine sinir bozucu, neredeyse imkansızdır).
• AJAX . Burada gösterilen çözümlerin kanıtladığı gibi, XMLHttpRequestnesneyi veri almak ve sayfanıza enjekte etmek için kullanabilirsiniz. İdeal değildir, çünkü komut dosyası yazma tekniklerine bağlıdır, böylece diğer dezavantajların yanı sıra yürütmeyi daha yavaş ve daha karmaşık hale getirir .
• Hackler . Bu soruda çok az bahsedilen ve çok güvenilir değil.

• HTML5 Web Bileşenleri . Web Bileşenlerinin bir parçası olan HTML İçe Aktarmaları, HTML belgelerini diğer HTML belgelerinde paketlemenize olanak tanır. Yani içerir HTML, CSS, JavaScriptveya başka bir şey, bir .htmldosya içerebilir. Bu, onu birçok ilginç kullanım örneğiyle harika bir çözüm haline getirir: bir uygulamayı yapı taşları olarak dağıtabileceğiniz, yedekliliği önlemek için bağımlılıkları daha iyi yönetebileceğiniz, kod organizasyonu vb.

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

Yerel uyumluluk hala bir sorundur, ancak bugün her zaman yeşil tarayıcılarda çalışmasını sağlamak için bir çoklu dolgu kullanabilirsiniz .

Burada ve burada daha fazla bilgi edinebilirsiniz .

Nesneyi ve gömmeyi kullanabilirsiniz, şöyle:

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

Bu yeni değil, ama yine de çalışıyor. Yine de aynı işlevselliğe sahip olup olmadığından emin değilim.

Hayır, eşdeğeri yok. <iframe>Eleman hala HTML5 geçerlidir. Tam olarak hangi etkileşime ihtiyacınız olduğuna bağlı olarak farklı API'ler olabilir. Örneğin, web postMessagealanları arası javascript etkileşimi elde etmenizi sağlayan bir yöntem vardır. Ancak, web alanları arası HTML içeriklerini (CSS ile stilize edilmiş ve javascript ile etkileşimli hale getirilmiş) görüntülemek istiyorsanız, iframeiyi bir yol olarak kalır.

object HTML5'te kolay bir alternatiftir:

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

Ayrıca deneyebilirsiniz 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 !!');" />

Bunu yapmak ve temel sayfanın veya içeriğin sunulduğu sunucuyu kontrol etmek istiyorsanız, istemciye izin vermek için Çapraz Kaynak Kaynağı Paylaşımı'nı ( http://www.w3.org/TR/access-control/ ) kullanabilirsiniz. <div>yoluyla JavaScript yüklemek için bir yandan JavaScript 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();

Şimdi tüm bu işlemin linçinde, sunucunuz için istemcilere Access-Control-Allow-Originbaşlık verecek ve istemci tarafı kodunun hangi alanlara erişmesini istediğinizi belirten bir kod yazmanız gerekir XMLHttpRequest(). Aşağıda, bu başlıkları istemcilere göndermek için sayfanızın üstüne ekleyebileceğiniz bir PHP kodu örneği verilmiştir:

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

Bu da işe yarıyor gibi görünüyor, ancak W3C "harici (genellikle HTML olmayan) bir uygulama veya etkileşimli içerik için tasarlanmadığını" belirtiyor

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

Daha fazla bilgi: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Bir iframe, web alanları arası görsel içeriği indirmenin en iyi yoludur. AJAX ile HTML'yi bir web sayfasından indirebilir ve bir div'a yapıştırabilirsiniz (diğerlerinin de belirttiği gibi), ancak daha büyük sorun güvenliktir. İframe'lerle, alanlar arası içeriği yükleyebileceksiniz, ancak içerik aslında size ait olmadığından manipüle edemeyeceksiniz. Öte yandan AJAX ile indirebileceğiniz herhangi bir içeriği kesinlikle değiştirebilirsiniz, ancak diğer alanın sunucusunun, indirmeye başlamanıza izin verecek şekilde ayarlanması gerekir. Çoğu zaman diğer alanın yapılandırmasına erişemezsiniz ve bunu yapsanız bile, bu tür bir yapılandırmayı her zaman yapmazsanız, baş ağrısı olabilir. Bu durumda iframe çok daha kolay bir alternatif olabilir.

Diğerlerinin de belirttiği gibi, gömme etiketini ve nesne etiketini de kullanabilirsiniz, ancak bu, iframe'den daha gelişmiş veya daha yeni olmayabilir.

HTML5, çapraz alanlardan bilgi almak için web API'lerini benimseme yönünde daha fazla ilerleme kaydetti. Genellikle web API'ları HTML değil veri döndürür.

Bir div (veya sayfanızın herhangi bir öğesine) bir sayfa yüklemek için XMLHttpRequest kullanabilirsiniz. Örnek bir fonksiyon şöyle olacaktır:

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

Sunucu yeteneğiniz varsa, bunu yapmak için PHP de kullanabilirsiniz, ancak bir HTML5 yöntemi istediğiniz için ihtiyacınız olan her şey bu olmalıdır.

Bu sorunu çözmek için bir düğüm modülü oluşturdum düğüm-iframe-değiştirme . İçeriğinizin enjekte edilmesi için üst sitenin ve CSS seçicinin kaynak URL'sini sağlarsınız ve ikisini bir araya getirir.

Ana sitedeki değişiklikler her 5 dakikada bir toplanır.

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

Kaynak , BBC News ana sayfasına içerik enjekte etmenin çalışan bir örneğini içerir .

JSON-P'ye bir göz atmalısınız - bu sorun yaşadığımda benim için mükemmel bir çözümdü:

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

Temel olarak tüm verilerinizi yükleyen bir javascript dosyası ve bunları işleyen ve görüntüleyen başka bir javascript dosyası tanımlarsınız. Bu, iframe'lerin çirkin kaydırma çubuğundan kurtulur.