web-dev-qa-db-fra.com

Comment placez-vous uniquement une certaine section d'un site Web dans un iframe?

Je cherche à mettre seulement une petite partie d'un site Web dans un iframe. Comment je ferais ça? Habituellement, lorsque je configure un iframe pour un site Web (disons yahoo), il obtient le site en entier ... Disons que je ne voulais qu'une petite partie du site, comment puis-je procéder?

Est-il possible de mettre des marges sur un iframe d'un site web?

Je cherche à mettre un iframe d'un site Web sur mon site. (si ça a du sens)

Merci d'avance

htmlwordpressiframe
9
Brian Smith

Dans la plupart des cas, la référence est externe et vous n’avez pas le contrôle sur la page externe. Ainsi, vous devez faire défiler le contenu IFRAME à la position souhaitée. Ceci est bien sûr impossible. Oui, il y a des bidouilles JavaScript, mais elles sont toutes une mauvaise solution, car le défilement ne se produit qu'après le chargement de la page . La Solution

Vous pouvez envelopper l'IFRAME dans une div et faire défiler le contenu de la DIV à l'aide des propriétés CSS absolues TOP et LEFT.

Voici un exemple: 

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

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

Ici vous avez un DIV de dimensions 400x200px. Maintenant, en déplaçant l'IFRAME à l'intérieur, vous pouvez le positionner au bon endroit.

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

Cela ne peut pas être fait de manière fiable en raison de même politique d'origine et des restrictions d'iframe associées.

.. La même stratégie d'origine est un concept de sécurité important pour un certain nombre de langages de programmation côté navigateur, tels que JavaScript. The policy .. empêche l'accès à la plupart des méthodes et propriétés de plusieurs pages sur différents sites.

S'il s'agissait de votre site Web sur votre site Web [ou d'un proxy du site cible], alors JavaScript dans le parent pourrait modifier le DOM ou le CSS de l'iframe incorporé à votre guise.

Si le site Web cible est disposé à communiquer des données par d'autres moyens (y compris XDR/XHR + CORS ), ceux-ci pourraient également être utilisés comme des piratages. Cependant, il n'y a pas de solution générale pour cette tâche.

Même jQuery.load (qui utilise XHR) est limité par la même politique d'origine: 

En raison des restrictions de sécurité du navigateur, la plupart des demandes "Ajax" sont soumises à la règle même origine; la demande ne peut pas récupérer les données d'un domaine, sous-domaine ou protocole différent.

1
user166390

Un <iframe> vous donne une fenêtre complète pour travailler. Le moyen le plus direct de faire ce que vous voulez est de demander à votre serveur de vous fournir une page complète ne contenant que le fragment que vous souhaitez afficher.

En guise d'alternative, vous pouvez simplement utiliser un <div> simple et utiliser la fonction jQuery load pour charger la page entière et extraire uniquement la section souhaitée:

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

Vous devrez peut-être faire autre chose et une différence importante est que le contenu fera partie de la page principale au lieu d'être séparé dans une fenêtre séparée.

Vous ne pourrez pas manipuler l'URL pour obtenir seulement une partie de la page. Donc, ce que vous voudrez faire est de récupérer le contenu de la page via le langage côté serveur de votre choix, puis d’analyser le code HTML. À partir de là, vous pouvez saisir le fichier DIV que vous recherchez et l'imprimer à votre écran. Vous pouvez également utiliser pour supprimer le contenu indésirable.

Avec PHP, vous pouvez utiliser file_get_contents() pour lire le fichier que vous souhaitez analyser, puis utiliser DOMDocument pour l’analyser et saisir le DIV souhaité.

Voici l'idée de base. Ceci n’a pas été testé mais devrait vous orienter dans la bonne direction:

$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