Alternatief voor iFrames met HTML5

<object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html">
    Alternative Content
</object>

Antwoord 5, autoriteit 19%

Als u dit wilt doen en de server wilt beheren van waaruit de basispagina of inhoud wordt aangeboden, kunt u Cross Origin Resource Sharing gebruiken (http://www.w3.org/TR/access-control/) om client-side JavaScript gegevens te laten laden in een <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();

Nu voor het Lynchpin van deze hele operatie, moet u code voor uw server schrijven die klanten de Access-Control-Allow-Originkoptekst geeft, met welke domeinen u de client-kant wilt Code om toegang te krijgen tot via XMLHttpRequest(). Het volgende is een voorbeeld van PHP-code U kunt bovenaan uw pagina opnemen om deze headers naar klanten te verzenden:

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

Antwoord 6, Autoriteit 15%

Dit lijkt ook te werken, hoewel W3C het specificeert, is niet bedoeld “voor een externe (meestal niet-html) applicatie of interactieve inhoud”

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

Meer info:
http://www.w3.org/wiki/html/elements/embed
http://www.w3schools.com/tags/tag_embed.asp

Antwoord 7, Autoriteit 9%

Een iframe is nog steeds de beste manier om cross-domein visuele inhoud te downloaden. Met Ajax kunt u zeker de HTML downloaden van een webpagina en plakken in een div (zoals anderen hebben genoemd), maar het grotere probleem is beveiliging. Met IFRAMES kunt u de Cross Domain-inhoud laden, maar niet in staat is om het te manipuleren, aangezien de inhoud niet echt bij u behoort. Aan de andere kant met AJAX u zeker geen content kunt manipuleren bent u in staat om te downloaden, maar server behoeften van de ander domein op te zetten in een zodanige wijze dat u zal toestaan ​​om het te downloaden om te beginnen. Veel keren hebt u geen toegang tot de configuratie van het andere domein en zelfs als u dat doet, tenzij u de hele tijd dat soort configuratie doet, kan het hoofdpijn zijn. In dat geval kan de IFRAME het veel eenvoudiger alternatief zijn.

Zoals anderen hebben vermeld, kunt u ook de insluitende tag en het object-tag gebruiken, maar dat is niet noodzakelijkerwijs geavanceerder of nieuwer dan de IFRAME.

HTML5 is meer gegaan in de richting van het adopteren van Web API’s om informatie van cross-domeinen te krijgen. Meestal retourneert Web API’s echter gegevens en niet HTML.

Antwoord 8, Autoriteit 4%

Ik heb een knooppuntmodule gemaakt om dit probleem op te lossen knooppunt-iframe-vervanging . U geeft de bron-URL van de bovenliggende site en CSS-selector om uw content injecteren in en voegt ze bij elkaar.

Wijzigingen in de bovenliggende site worden om de 5 minuten opgehaald.

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

De bron bevat een werkvoorbeeldvan het injecteren van inhoud op de startpagina van BBC News.

Antwoord 9, autoriteit 2%

Je kunt een XMLHttpRequest gebruiken om een pagina in een div te laden (of eigenlijk elk ander element van je pagina). Een voorbeeldfunctie zou zijn:

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

Als je server hiervoor geschikt is, kun je ook PHP gebruiken om dit te doen, maar aangezien je om een HTML5-methode vraagt, zou dit alles moeten zijn wat je nodig hebt.

Antwoord 10

Het sleutelnummer om de pagina van een andere site op de pagina van uw eigen site te laden is beveiliging. Er is gedefinieerd cross-site beveiligingsbeleid, u zou geen kans hebben om het direct in uw iframe te laden als een andere site het heeft ingesteld op het strenge zelfde oorsprongsbeleid. Om een ​​alternatief voor IFRAME te vinden, moeten ze deze beveiligingsbeleidsbeperking kunnen omzeilen, zelfs in de toekomst, als een nieuwe component door WSC wordt geïntroduceerd, zou het vergelijkbare beveiligingsbeperkingen hebben.

Voor nu, de beste manier om dit te omzeilen, is het om een ​​normale pagina-toegang in uw logica te simuleren, dit betekent dat Ajax + Server Side Access misschien een goede optie is. U kunt wat proxy opzetten aan uw serverzijde en de pagina-inhoud ophalen en deze in de IFRAME laden. Dit werkt maar niet perfect alsof er een link of afbeelding in de inhoud is en ze mogelijk niet toegankelijk zijn.

Normaal gesproken als u probeert een pagina in uw eigen iframe te laden, moet u controleren of de pagina in IFrame of niet kan worden geladen. Dit post geeft enkele richtlijnen over het controleren van de cheque.

Antwoord 11

Je zou naar JSON-P moeten kijken – dat was een perfecte oplossing voor mij toen ik dat probleem had:

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

U definieert in principe een JavaScript-bestand dat al uw gegevens en een ander JavaScript-bestand laadt dat deze verwerkt en toont. Die de lelijke schuifbalk van iframes kwijt is.