Come si inserisce solo una determinata sezione di un sito Web in un iframe?

Question

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 potrei fare questo?

È 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 questo ha un senso)

Grazie in anticipo: D

Answer 1

Nella maggior parte dei casi il riferimento è esterno e non hai 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 pessima soluzione, perché lo scorrimento avviene solo dopo che la pagina è stata caricata. La soluzione

È possibile avvolgere IFRAME in un div e scorrere il contenuto DIV utilizzando 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 si ha un DIV con le 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> 

Answer 2

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

In alternativa, si potrebbe utilizzare un semplice <div> e utilizzare la funzione jQuery load per caricare l'intera pagina e cogliere fuori solo la sezione che si desidera:

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

Ci possono essere altre cose è necessario fare, e una differenza significativa è che il contenuto diventerà parte della pagina principale invece di essere segregato in una finestra separata.

---

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

Con PHP è possibile utilizzare file_get_contents() per leggere il file che si desidera analizzare e quindi utilizzare DOMDocument per analizzarlo e acquisire il DIV desiderato.

Ecco l'idea di base. Questo non è testato, ma dovrebbe puntare 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; 
    } 
} 

Answer 3

Questo non può essere fatto in modo affidabile a causa di same origin policy e le relative restrizioni iframe.

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

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

Se il sito Web di destinazione è disposto a comunicare i dati attraverso altri mezzi (incluso XDR/XHR + CORS), quindi quelli potrebbero potenzialmente essere usati come hack-a-bouts. Tuttavia, non esiste una soluzione generale per questo compito.

Anche jQuery.load (che utilizza XHR) è limitata dalla stessa politica di origine:

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

Answer 4

carica il sito web pieno un altro modo di fare è un modo semplice

<iframe src="http://site.com/#content"></iframe> 

dove #content è il div id contenuto che deve essere mostrato