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

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

У меня есть внешняя страница и много внутренних страниц. На внешней странице всегда должен отображаться заголовок страницы для внутренней страницы (это имеет смысл в моем приложении, возможно, меньше в этом урезанном примере). Это работает без проблем в AppJS, но мне было предложено заставить это приложение работать прямо в браузере. Я получаю сообщение об ошибке "Заблокирован фрейм с источником" null "при доступе к фрейму с источником" 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");

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

--allow-file-access-from-files

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

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

--disable-web-security

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

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

document.domain = document.domain;

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

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

document.domain = "foo.com";

Это привело к ошибке "Uncaught Error: SecurityError: DOM Exception 18".

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

Источник

3 ответа

Решение

За нашу дискуссию в моем кубе минуту назад:)

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

Меня привлекло не запускать файл напрямую из файловой системы, а запускать его с локального сервера. Я использовал узел для запуска express.js. Вы можете установить экспресс с помощью следующей команды: 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

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

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

Источник

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

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

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

Источник

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

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

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

Источник
Другие вопросы по тегам