2013-07-30 2 views
35

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

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

Я думаю, что это связано с той же политикой происхождения, что и для локальных файлов, но это не помогло мне устранить проблему напрямую. Я могу обойти проблему в этом урезанном примере, используя метод window.postMessage за Ways to circumvent the same-origin policy. Однако, выходя за рамки этого примера, я также хочу манипулировать DOM внутренней страницы с внешней страницы, так как это сделает мой код намного чище, поэтому публикация сообщений не будет выполнять эту работу.

Outer Page

<!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 Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?, я пытался запускать Chrome с флагом

--allow-file-access-from-files 

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

Per Disable same origin policy in Chrome, я пытался запускать Chrome с флагом

--disable-web-security 

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

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

document.domain = document.domain; 

Это привело к ошибке "блокированной кадр с происхождением„нулевым“от доступа кадра с началом„нулем“. Рама запрашивает доступ установите «document.domain» на «», но доступ к кадру не сделал. Оба должны установить «document.domain» на то же значение, чтобы разрешить доступ. «

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

document.domain = "foo.com"; 

Это привело к ошибке «Неиспользованная ошибка: SecurityError: исключение DOM 18».

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

ответ

12

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

я ударил эту же проблему (Ajax post response from express js keeps throwing error) пытается получить запрос после AJAX для правильной работы.

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

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

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

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

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

+7

Обратите внимание, что если у вас установлен Python, вы можете применить тот же подход, который вы предлагаете здесь, и [настроить веб-сервер в одной строке] (http://stackoverflow.com/a/532710/710446): 'python -m SimpleHTTPServer [ port] ' – apsillers

+0

Вау, это действительно хорошо. Не видел этого. Я тестировал его на одном исходном коде, и он работает, но медленнее, чем экспресс. Быть быстрым и быстрым - это довольно удивительно и, конечно же, компромисс, который нужно учитывать. – Brian

+1

С Python 3 используйте вместо этого: 'python -m http.server [port]' – taleinat

17

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

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

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

+0

Мальчик, это слишком плохо. Большое спасибо за ваш ответ, хотя! – ATTD

2

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

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

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

+0

Мне любопытно, что это за соображения безопасности. Честно говоря, я не вижу причин, по которым это должно быть запрещено. Если есть конкретный случай, было бы замечательно, если бы Chrome мог предоставить разумное сообщение, так как я ожидаю, что протокол, домен и порт будут одинаковыми для группы локальных файлов. –

+0

@JacekPrucia Я взломаю: причина в том, что если кто-то дает вам приложение, которое обращается к локальным файлам, то если Chrome не блокирует его, он может продолжить чтение и запись локальных файлов. (Это не очевидно, если вы работаете над своим собственным приложением и просто хотите получить доступ к своей собственной файловой системе, но это становится более очевидным, если вы распространяете свое приложение на других.) –

+0

@martinjakubik Конечно, это возможно, но я до сих пор не вижу вред в этом. Предположим, что ваша страница внедрена в «C: \ Projects \ Test \ Test.html». Злонамеренная страница может записывать только локальные файлы в этой конкретной папке (такая же политика происхождения при применении к папкам). Уверен, что он может создавать вредоносные файлы - приложения, которые маскируются как невинные заставки, однако вам все еще нужно действие пользователя для ущерба, который необходимо выполнить. Если вы просто используете приложение, я до сих пор не вижу, как он может повредить локальную систему. –

Смежные вопросы