Alternatywa dla iFrames z HTML5

Question

Chciałbym wiedzieć, czy istnieje alternatywa dla iFrames z HTML5. Rozumiem przez to, że potrafię wstrzykiwać kod HTML między domenami bez korzystania z iFrame.

Answer 1

Nie, nie ma odpowiednika. Element <iframe> jest nadal poprawny w HTML5. W zależności od tego, jaką dokładnie interakcję potrzebujesz, mogą istnieć różne interfejsy API. Na przykład istnieje metoda postMessage, która pozwala uzyskać interakcję z javascript między domenami. Ale jeśli chcesz wyświetlać zawartość HTML w wielu domenach (stylizowaną na CSS i interaktywną z javascript), to jest to dobry sposób na zrobienie tego.

Answer 2

Można użyć obiektu i osadzić, jak tak:

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

który nie jest nowy, ale nadal działa. Nie jestem pewien, czy ma tę samą funkcjonalność.

Answer 3

Możesz użyć XMLHttpRequest, aby załadować stronę do elementu div (lub dowolnego innego elementu strony). Funkcja exemple byłoby:

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

Jeśli Sever jest zdolny, można również korzystać z PHP, aby to zrobić, ale skoro pytasz o metody HTML5, powinno to być wszystko, czego potrzebujemy.

Answer 4

Jeśli chcesz to zrobić i kontrolować serwer, z którego jest podawane na stronie bazowej lub treści, można użyć Cross-Origin Resource Sharing (http://www.w3.org/TR/access-control/), aby umożliwić stronie klienta JavaScript, aby załadować dane do <div> poprzez 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(); 

teraz bazy dla całej tej operacji, trzeba napisać kod dla serwera, który pozwoli klientom nagłówek Access-Control-Allow-Origin, określając, które domeny chcesz kod po stronie klienta, aby być w stanie uzyskać dostęp poprzez XMLHttpRequest(). Poniżej znajduje się przykład kodu PHP można umieścić na górze strony, aby wysłać te nagłówki do klientów:

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

Answer 5

to również nie wydają się działać, choć W3C określa nie jest przeznaczony „dla zewnętrzny (zazwyczaj nie HTML) wniosek lub interaktywnych treści”

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

Więcej informacji: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Answer 6

iframe jest nadal najlepszym sposobem na pobranie poprzeczny-do główna treść wizualna. Z AJAX możesz oczywiście pobrać HTML ze strony internetowej i włożyć go do div (jak wspomnieli inni), jednak większym problemem jest bezpieczeństwo. W przypadku ramek iframe będziesz mógł ładować zawartość między domenami, ale nie będziesz mógł nimi manipulować, ponieważ ta zawartość w rzeczywistości nie należy do Ciebie. Z drugiej strony z AJAX możesz z pewnością manipulować dowolną treścią, którą możesz pobrać, ale serwer innej domeny musi być skonfigurowany w taki sposób, abyś mógł go pobrać na początek. Wiele razy nie będziesz mieć dostępu do konfiguracji innej domeny, a nawet jeśli będziesz to robił, chyba że wykonasz taką konfigurację przez cały czas, może to być ból głowy. W takim przypadku iframe może być DUŻO prostszą alternatywą.

Jak już wspomnieli inni, można również użyć znacznika embed i znacznika object, ale niekoniecznie jest on bardziej zaawansowany lub nowszy niż element iframe.

HTML5 poszło dalej w kierunku adaptacji interfejsów API w celu uzyskania informacji z domen między domenami. Zazwyczaj web API po prostu zwracają dane, a nie HTML.

Answer 7

Zasadniczo istnieją 4 sposoby, aby umieścić kod HTML na stronę internetową: zawartość

• iframe żyje całkowicie w odrębnym kontekście niż strony. Chociaż jest to głównie wspaniała funkcja i jest najbardziej kompatybilna z wersjami przeglądarek, stwarza dodatkowe wyzwania (obkurczanie rozmiaru ramki do jej zawartości jest trudne, szalenie frustrujące, że można go wkleić/wylogować, prawie uniemożliwić styl).
• AJAX. Pokazane tutaj rozwiązania dowodzą, że możesz użyć obiektu XMLHttpRequest, aby pobrać dane i wprowadzić je na swoją stronę. Nie jest idealny, ponieważ zależy od technik skryptowania, dzięki czemu wykonywanie jest wolniejsze i bardziej złożone, między innymi drawbacks.
• Hacks. Niewiele wspomniano w tym pytaniu i niezbyt niezawodne.

• HTML5 Komponenty sieciowe. Import HTML, część Komponentów sieciowych, umożliwia grupowanie dokumentów HTML w innych dokumentach HTML. Obejmuje to: HTML, CSS, JavaScript lub cokolwiek innego, co może zawierać plik .html. To sprawia, że ​​jest to idealne rozwiązanie w wielu przypadkach ciekawe zastosowanie: Split aplikacja do dołączonych elementów, które można rozpowszechniać jako budulec, lepiej zarządzać zależnościami, aby uniknąć zwolnień, organizację kodu, itp Tutaj jest trywialny przykład:

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

Native compatibility to nadal problem, ale można go użyć w wersji polyfill, aby zadziałał już dzisiaj.

Możesz dowiedzieć się więcej here i here.

Answer 8

object jest łatwym alternatywa w 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>

Możesz także spróbować embed:

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

Answer 9

Mimo że nie ma żadnego doskonałego zamiennika, nad czymś pracowałem, jest on łatwy do zrobienia i cieszę się, że to działa (dzięki junkfoodjunkie)

Zasadniczo mój obecny system wykorzystuje podstawowe php/server combo, aby załadować, a następnie zapisać plik na serwerze, właśnie uruchomiłem projekt, więc wczytałem tylko główny plik (taki jak index.html). Będę pracował nad tym, aby załadować 50 linków ze strony, aby pomóc w obsłudze. Jeśli chcesz go przetestować: jest hostowany here. Aby go użyć jest to łatwe, wystarczy załadować adres URL http://integratedmedia.ml/get/?link= i dodać swoją stronę do końca. nie trzeba dodawać w https lub www.Będzie również powodować problemy, jeśli to zrobisz :) W każdym razie, jeśli podążysz za tym zestawem, skopiowana strona zostanie znaleziona na integratedmedia.ml/get/gettmp/YOURURL.html. Oto przykład:

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

pobierany plik jest teraz w

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

Answer 10

Utworzono moduł węzła do rozwiązania tego problemu node-iframe-replacement. Podajesz źródłowy adres URL strony nadrzędnej i selektora CSS, aby wprowadzić zawartość do pliku i scalić oba.

Zmiany w witrynie nadrzędnej są rejestrowane co 5 minut.

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

Źródłem zawiera working example wtryskiwania treści na stronie BBC News domu.

Answer 11

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

można użyć znacznika object to również nie wydają się działać