Usando iframe com arquivos locais no Chrome

Estou com dificuldades para descobrir como acessar uma página carregada em um iframe a partir da página externa. Ambas as páginas são arquivos locais e estou usando o Chrome.

Eu tenho uma página externa e muitas páginas internas. A página externa deve sempre exibir o título da página interna (faz sentido no meu aplicativo, talvez menos neste exemplo despojado). Isso funciona sem nenhum problema no AppJS, mas fui solicitado a fazer esse aplicativo funcionar diretamente no navegador. Estou recebendo o erro ” Bloqueado um quadro com origem” null “de acessar um quadro com origem” nulo “. Protocolos, domínios e portas devem corresponder.

Acho que isso se deve à mesma política de origem do Chrome em relação aos arquivos locais, mas isso não me ajudou a corrigir o problema diretamente. Eu posso contornar o problema neste exemplo despojado usando o método window.postMessage por Formas de contornar a política de mesma origem . No entanto, indo além desse exemplo, eu também quero manipular o DOM da página interna da página externa, já que isso tornará meu código muito mais limpo – assim, postar mensagens não funcionará bem.

Página exterior

      This text is in the outer page     

Página Interna

    Home    This text is in the inner page   

JavaScript

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

Por É provável que versões futuras do Chrome suportem contentWindow / contentDocument quando o iFrame carrega um arquivo html local do arquivo html local? , Tentei iniciar o Chrome com a bandeira

 --allow-file-access-from-files 

Mas não houve alteração nos resultados.

Por desativar a mesma política de origem no Chrome , tentei iniciar o Chrome com a bandeira

 --disable-web-security 

Mas, novamente, não houve alteração nos resultados.

Por que document.domain = document.domain faz? , Eu tinha as duas páginas executando o comando

 document.domain = document.domain; 

Isso resultou no erro ” Bloqueado um quadro com origem” nulo “de acessar um quadro com origem” nulo “. O quadro solicitando access definido” document.domain “para” “, mas o quadro que está sendo acessado não. Ambos devem definir” document.domain “com o mesmo valor para permitir access.

Por diversão, eu tinha as duas páginas executando o comando

 document.domain = "foo.com"; 

Isso resultou no erro ” Uncaught Error: SecurityError: DOM Exception 18 “.

Estou debatendo. Qualquer ajuda de pessoas mais conhecedoras seria fantástico! Obrigado!

Por nossa discussão no meu cubo há um minuto atrás 🙂

Eu bato este mesmo problema ( Ajax post resposta do express js continua jogando erro ) tentando obter uma solicitação de post AJAX para funcionar corretamente.

O que me causou isso é não executar o arquivo diretamente do sistema de arquivos, mas sim executá-lo em um servidor local. Eu usei o nó para executar o express.js. Você pode instalar o express com o seguinte comando: npm install -g express

Depois disso, você pode criar um projeto expresso com o seguinte comando: express -s -e expressTestApp

Agora, nessa pasta, você verá um arquivo chamado app.js e uma pasta chamada public. Coloque os arquivos html com os quais você deseja trabalhar na pasta pública. Eu substituí o arquivo app.js pelo seguinte código:

 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 que a linha requerida pode ser diferente. Você tem que descobrir onde seu sistema realmente se expressa. Você pode fazer isso com o seguinte comando: sudo find / -name express

Agora, inicie o servidor da web expresso com o seguinte comando: node app.js

No momento, o servidor da web está funcionando. Vá em frente e abra um navegador e navegue para o seu endereço IP (ou se você estiver na mesma máquina que seu servidor, 127.0.0.1). Use o endereço IP: portnumber \ filename.html onde o número da porta é o 5555 no arquivo app.js que criamos.

Agora, nesse navegador, você não deveria (e não o fez quando testamos isso) ter qualquer um desses mesmos problemas.

Lamento dizer que tentei durante semanas resolver esse problema (precisei de um projeto) e minha conclusão é que não é possível.

Há muitos problemas em relação ao access local através do javascript com o chrome, e alguns deles podem ser resolvidos usando --allow-file-access-from-files e --disable-web-security , incluindo alguns resources offline do HTML5, mas eu definitivamente acho que não há como acessar arquivos locais.

Eu recomendo que você não perca o seu tempo tentando circunvender isso e tentar postar mensagens que você pode interpretar nas páginas internas, para que você possa fazer as modificações do DOM lá.

file: // protocol e http: // protocol fazem com que as coisas se comportem de maneira muito diferente em relação aos iframes. Eu tive os mesmos problemas que você descreve com um aplicativo no PhoneGap que usa o protocolo de arquivo para acessar todos os arquivos locais dentro da pasta local assets / www.

Se parece que os navegadores modernos impedem a exibição de arquivos “locais” usando o protocolo de arquivo em iframes por motivos de segurança.

Nós acabamos despejando iframes e apenas usando divs como “viewports”. Felizmente, o tamanho geral do nosso aplicativo não era tão grande, então conseguimos carregar tudo em uma única página.