"Acesso negado" Erro de JavaScript ao tentar acessar o objeto de documento de um <iframe> programaticamente criado (somente IE)
Eu tenho projeto em que preciso criar um elemento <iframe> usando JavaScript e anexá-lo ao DOM. Depois disso, preciso inserir algum conteúdo no <iframe>. É um widget que será incorporado em sites de terceiros.
Não defino o atributo "src" do <iframe>, pois não quero carregar uma página; em vez disso, ele é usado para isolar / sandbox o conteúdo que eu insiro nele para que eu não entre em conflitos de CSS ou JavaScript com a página pai. Estou usando o JSONP para carregar algum conteúdo HTML de um servidor e inseri-lo neste <iframe>.
Eu tenho esta funcionando bem, com uma grave exceção - se o document.domain propriedade é definida na página pai (que pode ser em determinados ambientes em que este widget é implantado), o Internet Explorer (provavelmente todas as versões, mas eu tenho confirmado em 6, 7 e 8) me dá um erro "Acesso negado" quando tento acessar o objeto de documento deste <iframe> que criei. Isso não acontece em nenhum outro navegador que eu testei (todos os grandes e modernos).
Isso faz algum sentido, já que estou ciente de que o Internet Explorer exige que você defina o document.domain de todas as janelas / quadros que se comunicarão entre si com o mesmo valor. No entanto, não conheço nenhuma maneira de definir esse valor em um documento que não posso acessar.
Alguém está ciente de uma maneira de fazer isso - de alguma forma, definir a propriedade document.domain deste <iframe> dinamicamente criado? Ou não estou olhando para ele do ângulo certo - existe outra maneira de alcançar o que estou procurando sem me deparar com esse problema? Eu preciso usar um <iframe> em qualquer caso, como a janela isolada / sandbox é crucial para a funcionalidade deste widget.
Aqui está o meu código de teste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page's document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to the placeholder element
setTimeout(function() { // set a timeout to give browsers a chance to recognize the <iframe>
doc = iframe.contentWindow || iframe.contentDocument; // get a handle on the <iframe> document
alert(doc);
if (doc.document) { // HEREIN LIES THE PROBLEM
doc = doc.document;
}
doc.body.innerHTML = '<h1>Hello!</h1>'; // add an element
}, 10);
</script>
</body>
</html>
Eu hospedei em:
http://troy.onespot.com/static/access_denied.html
Como você verá se você carregar esta página no IE, no ponto que eu chamo alert (), eu tenho um identificador no objeto de janela do <iframe>; Eu não consigo me aprofundar mais em seu objeto de documento.
Muito obrigado por qualquer ajuda ou sugestão! Ficarei em dívida com quem puder me ajudar a encontrar uma solução para isso.