Использование iframe с локальными файлами в Chrome

Мне сложно определить, как получить доступ к странице, загруженной в iframe с внешней страницы. Обе страницы - это локальные файлы, и я использую Chrome.

У меня есть внешняя страница и многие внутренние страницы. Внешняя страница должна всегда отображать заголовок страницы для внутренней страницы (это имеет смысл в моем приложении, возможно, в меньшей степени в этом урезанном примере). Это работает без проблем в AppJS, но мне было предложено сделать это приложение непосредственно в браузере. Я получаю сообщение об ошибке "Заблокировал кадр с источником" null "от доступа к кадру с исходным" нулем ". Протоколы, домены и порты должны соответствовать.".

Я думаю, что это связано с той же политикой Chrome, что и локальные файлы, но это не помогло мне устранить проблему напрямую. Я могу обойти проблему в этом урезанном примере, используя метод window.postMessage для Способы обхода политики одного и того же происхождения. Однако, выходя за рамки этого примера, я также хочу манипулировать DOM внутренней страницы с внешней страницы, так как это сделает мой код намного более чистым, поэтому отправка сообщений не будет выполнять эту работу.

Наружная страница

<!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>

Внутренняя страница

<!DOCTYPE html>
<html>
    <head>
        <title id="Page_Title">Home</title> 
        <meta name="viewport">
    </head> 
    <body>
        This text is in the inner page
    </body>
</html>

JavaScript

var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");

Per Возможно ли, что будущие выпуски Chrome поддерживают contentWindow/contentDocument, когда iFrame загружает локальный файл html из локального файла html?, я попробовал запустить Chrome с флагом

--allow-file-access-from-files

Но результатов не было.

Per Отключить такую же политику происхождения в Chrome, я попробовал запустить Chrome с флагом

--disable-web-security

Но опять же никаких изменений в результатах не было.

Per Что делает document.domain = document.domain?, у меня обе страницы запускали команду

document.domain = document.domain;

Это привело к ошибке "Заблокировал кадр с исходным" нулем "от доступа к кадру с исходным" нулем ". Кадр, запрашивающий доступ, устанавливает" document.domain "в" ", но к кадру, к которому обращаются, не было. должен установить" document.domain "на то же значение, чтобы разрешить доступ".

Для удовольствия у меня на обеих страницах была запущена команда

document.domain = "foo.com";

В результате произошла ошибка "Неиспользуемая ошибка: SecurityError: DOM Exception 18".

Я барахтаюсь. Любая помощь от более знающих людей была бы фантастической! Спасибо!

Ответ 1

В нашем обсуждении в моем кубе всего минуту назад:)

Я ударил по этой же проблеме (Ответ Ajax post от express js продолжает бросать ошибку), пытаясь заставить пост-пост AJAX работать правильно.

Что меня окружало, это не запуск файла непосредственно из файловой системы, а запуск его с локального сервера. Я использовал node для запуска express.js. Вы можете установить express с помощью следующей команды: npm install -g express

Как только это будет выполнено, вы можете создать экспресс-проект с помощью следующей команды: express -s -e expressTestApp

Теперь в этой папке вы должны увидеть файл с именем app.js и папку с именем public. Поместите файлы html, с которыми вы хотите работать в общей папке. Я заменил файл app.js следующим кодом:

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");  });

Обратите внимание, строка запроса может отличаться. Вы должны найти, где ваша система действительно выразительно. Вы можете сделать это с помощью следующей команды: sudo find/-name express

Теперь запустите экспресс-сервер с помощью следующей команды: node app.js

В это время веб-сервер запущен и работает. Идите вперед и откройте browswer и перейдите к своему ip-адресу (или если вы находитесь на том же компьютере, что и ваш сервер, 127.0.0.1). Используйте ip-адрес: portnumber\filename.html, где номер порта - 5555 в файле app.js, который мы создали.

Теперь в этом браузере вы не должны (и не проверили его), чтобы иметь какие-либо из этих же проблем.

Ответ 2

Мне жаль говорить вам, что я пытался в течение нескольких недель решить эту проблему (мне это было нужно для проекта), и я пришел к выводу, что это невозможно.

Существует много проблем с локальным доступом через javascript с хром, и некоторые из них могут быть решены с помощью --allow-file-access-from-files и --disable-web-security, включая некоторые автономные функции HTML5, но я определенно думаю, что нет никакого способа получить доступ к локальным файлам.

Я рекомендую вам не терять время, пытаясь обойти это, и попытаться опубликовать сообщения, которые вы можете интерпретировать на внутренних страницах, чтобы вы могли выполнять модификации DOM.

Ответ 3

file://протокол и http://протокол заставляют вещи вести себя по-разному в отношении iframes. У меня были те же проблемы, которые вы описываете приложением в PhoneGap, которое использует файловый протокол для доступа ко всем локальным файлам в локальной папке ресурсов /www.

Если кажется, что современные браузеры предотвращают отображение "локальных" файлов с использованием протокола файлов в iframe по соображениям безопасности.

Мы закончили сбрасывать фреймы и просто использовали divs как "видовые экраны". К счастью, общий размер нашего приложения был не таким большим, поэтому нам удалось загрузить все на одной странице.