Utilisation d'iframe avec des fichiers locaux dans Chrome
j'ai du mal à comprendre comment accéder à une page chargée dans une iframe à partir de la page externe. Les deux pages sont des fichiers locaux, et J'utilise Chrome.
j'ai une page extérieure, et beaucoup de pages intérieures. La page extérieure doit toujours afficher le titre de la page intérieure (cela a du sens dans mon application, peut-être moins dans cet exemple dépouillé). Cela fonctionne sans aucun problème dans AppJS, mais on m'a demandé de faire fonctionner cette application directement dans le navigateur. J'obtiens l'erreur " a Bloqué un cadre avec l'origine" null "d'accéder à un cadre avec l'origine"null". Les protocoles, les domaines et les ports doivent correspondre. ".
je pense que cela est dû à la même politique D'origine de Chrome concernant les fichiers locaux, mais cela ne m'a pas aidé à résoudre le problème directement. Je peux contourner le problème dans cet exemple dépouillé en utilisant la fenêtre.méthode de post-vente par moyens de contourner la Politique de la même origine . Cependant, en allant au - delà de cet exemple, je veux aussi manipuler le DOM de la page intérieure à partir de la page extérieure, puisque cela rendra mon code beaucoup plus propre-ainsi les messages d'affichage ne feront pas tout à fait le travail.
Page Extérieure
<!DOCTYPE html>
<html>
<head>
<meta name="viewport">
</head>
<body>
This text is in the outer page
<iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe>
<script src="./js/LoadNewPage.js"></script>
</body>
</html>
Page Intérieure
<!DOCTYPE html>
<html>
<head>
<title id="Page_Title">Home</title>
<meta name="viewport">
</head>
<body>
This text is in the inner page
</body>
</html>
var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Par il Est probable que les futures versions de Chrome soutien contentWindow/contentDocument quand iFrame charge un fichier html local à partir d'un fichier html local? , j'ai essayé de lancer Chrome avec le drapeau
--allow-file-access-from-files
Mais il n'y a pas eu de changement dans les résultats.
Per désactiver même politique d'origine dans Chrome , j'ai essayé de lancer Chrome avec le drapeau
--disable-web-security
mais encore une fois il n'y avait pas de changement dans les résultats.
Par Ce n'document.domaine= document.de domaine? , j'ai demandé aux deux pages d'exécuter la commande
document.domain = document.domain;
il en est résulté l'erreur " a Bloqué un cadre avec l'origine "null" d'accéder à un cadre avec l'origine "null". Le cadre de la demande d'accès ensemble du document".domaine" à"", mais le cadre auquel on accédait ne l'était pas. Les deux doivent définir "document.domaine" à la même valeur pour autoriser l'accès. "
pour le plaisir, j'ai demandé aux deux pages d'exécuter la commande
document.domain = "foo.com";
il en est résulté l'erreur " erreur non entachée: SecurityError: DOM Exception 18 ".
je me dérobe. Toute aide de personnes mieux informées serait fantastique! Merci!
3 réponses
selon notre discussion dans mon cube il y a juste une minute:)
j'ai frappé ce même problème ( Ajax post response from express js continue de lancer l'erreur ) en essayant d'obtenir une requête AJAX post pour fonctionner correctement.
ce qui m'a fait tourner, ce n'est pas d'exécuter le fichier directement à partir du système de fichiers, mais plutôt à partir d'un serveur local. J'ai utilisé node pour lancer express.js. Vous pouvez installer express avec la commande suivante: npm install -g express
une fois que cela est accompli, vous pouvez créer un projet express avec la commande suivante: express-s-e expressTestApp
Maintenant, dans ce dossier, vous devriez voir un fichier nommé app.js et un dossier nommé publique. Les fichiers html que vous souhaitez travailler dans le dossier public. J'ai remplacé l'application file.js avec le code suivant:
var express = require('/usr/lib/node_modules/express');
var app = express();
app.use(function(err, req, res, next){
console.error(err.stack);
res.send(500, 'Something broke!');
});
app.use(express.bodyParser());
app.use(express.static('public'));
app.listen(5555, function() { console.log("Server is up and running"); });
Note, la ligne requise peut être différente. Vous devez trouvez où votre système a mis express. Vous pouvez le faire avec la commande suivante: sudo find / - name express
maintenant, démarrez le serveur web express avec la commande suivante: node app.js
en ce moment, le serveur web est opérationnel. Allez-y, ouvrez un browswer et naviguez vers votre adresse ip (ou si vous êtes sur la même machine que votre serveur, 127.0.0.1). L'utilisation de la propriété intellectuelle adresse:port\nom de fichier.code html numéro de port est le 5555 dans l'application.fichier js que nous avons créé.
Maintenant dans le navigateur, vous ne devriez pas (et n'ai pas lorsque nous l'avons testé) ont les mêmes problèmes.
je suis désolé de vous dire que j'ai essayé pendant des semaines de résoudre ce problème (j'en avais besoin pour un projet) et ma conclusion est que ce n'est pas possible.
Il ya beaucoup de problèmes d'accès local par javascript avec chrome, et certains d'entre eux peuvent être résolus en utilisant --allow-file-access-from-files et --disable-web-security , y compris certaines fonctionnalités HTML5 hors ligne, mais je pense vraiment qu'il n'y a aucun moyen d'accéder aux fichiers locaux.
je vous recommande de ne pas perdre votre le temps d'essayer de contourner cela et d'essayer de poster des messages que vous pouvez interpréter dans les pages intérieures, de sorte que vous pouvez faire les modifications DOM là.
protocole file:// et http:// protocole de rendre les choses à se comporter de manière très différente en ce qui concerne les iframes. J'ai eu les mêmes problèmes que vous décrivez avec une application sur PhoneGap qui utilise le protocole file pour accéder à tous les fichiers locaux dans le dossier local assets/www.
si semble que les navigateurs modernes empêchent l'affichage de fichiers" locaux " en utilisant le protocole de fichier dans les iframes pour des raisons de sécurité.
nous avons fini par jeter iframes et juste en utilisant divs comme "les fenêtres". Heureusement la taille globale de notre application n'était pas si grande que ça, donc nous avons réussi à tout charger en une seule page.