it-swarm.dev

Come metti solo una certa sezione di un sito web in un iframe?

Sto cercando di mettere solo una piccola parte di un sito web in un iframe. Come lo farei? Di solito quando creo un iframe per un sito web (diciamo yahoo) ottiene l'intero sito Web ... Diciamo che volevo solo una piccola parte del sito web, come dovrei farlo?

È possibile mettere i margini su un iframe di un sito web?

Sto cercando di mettere un iframe di un sito web sul mio sito web. (se ciò ha senso)

Grazie in anticipo

9
Brian Smith

Nella maggior parte dei casi il riferimento è esterno e non si ha il controllo sulla pagina esterna. Quindi devi far scorrere il contenuto di IFRAME nella posizione desiderata. Questo ovviamente è impossibile. Sì, ci sono alcuni hack JavaScript, ma sono tutti una cattiva soluzione, perché lo scorrimento avviene solo dopo che la pagina è stata caricata . La soluzione

Puoi avvolgere IFRAME in un div e scorrere il contenuto DIV usando le proprietà CSS TOP e LEFT assolute.

Ecco un esempio:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Qui hai un DIV con dimensioni 400x200px. Ora spostando l'IFRAME al suo interno puoi posizionarlo nel posto giusto.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>
24
Tahir Yasin

Questo non può essere fatto in modo affidabile a causa di stessa politica di origine e delle restrizioni relative all'iframe.

.. la stessa politica di origine è un importante concetto di sicurezza per un certo numero di linguaggi di programmazione lato browser, come JavaScript. La politica .. impedisce l'accesso alla maggior parte dei metodi e delle proprietà su pagine su siti diversi.

Se fosse il tuo sito web nel tuo sito [o un proxy per il sito di destinazione], allora JavaScript nel genitore potrebbe modificare il DOM o CSS dell'iframe incorporato come desiderato ..

Se il sito web di destinazione è disposto a comunicare i dati attraverso altri mezzi (incluso XDR/XHR + CORS ), allora questi potrebbero essere usati anche come hack-a-bout. Tuttavia, non esiste una soluzione generale per questa attività.

Anche jQuery.load (che usa XHR) è limitato dalla stessa politica di origine: 

A causa delle restrizioni di sicurezza del browser, la maggior parte delle richieste "Ajax" è soggetta alla politica di same Origin; la richiesta non può recuperare correttamente i dati da un dominio, sottodominio o protocollo diversi.

1
user166390

Un <iframe> ti dà una finestra completa su cui lavorare. Il modo più diretto per fare ciò che vuoi è che il tuo server ti dia una pagina completa che contiene solo il frammento che vuoi mostrare.

In alternativa, puoi semplicemente utilizzare un semplice <div> e utilizzare la funzione jQuery load per caricare l'intera pagina e estrarre solo la sezione desiderata:

$('#target-div').load('http://www.yahoo.com');

Potrebbero esserci altre cose che devi fare e una differenza significativa è che il contenuto diventerà parte della pagina principale invece di essere separato in una finestra separata.


Non sarai in grado di manipolare l'URL per ottenere solo una parte della pagina. Quindi quello che vorresti fare è prendere il contenuto della pagina tramite la lingua lato server di tua scelta e quindi analizzare l'HTML. Da lì puoi prendere il DIV specifico che stai cercando e stamparlo sul tuo schermo. Puoi anche usare per rimuovere i contenuti indesiderati.

Con PHP potresti usare file_get_contents() per leggere il file che vuoi analizzare e quindi usare DOMDocument per analizzarlo e catturare il DIV che vuoi.

Ecco l'idea di base. Questo non è stato verificato ma dovrebbe indirizzarti nella giusta direzione:

$page = file_get_contents('http://touch.facebook.com');
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
    // Loop through the DIVs looking for one withan id of "content"
    // Then echo out its contents (pardon the pun)
    if ($div->getAttribute('id') === 'content') {
         echo $div->nodeValue;
    }
}
0
Azzy