Chamar função javascript em iframe
-
05-07-2019 - |
Pergunta
Eu tenho problema chamar uma função JavaScript em uma iframe
a partir da página pai. Aqui está o meu duas páginas:
mainPage.html
<html>
<head>
<title>MainPage</title>
<script type="text/javascript">
function Reset()
{
if (document.all.resultFrame)
alert("resultFrame found");
else
alert("resultFrame NOT found");
if (typeof (document.all.resultFrame.Reset) == "function")
document.all.resultFrame.Reset();
else
alert("resultFrame.Reset NOT found");
}
</script>
</head>
<body>
MainPage<br>
<input type="button" onclick="Reset()" value="Reset"><br><br>
<iframe height="100" id="resultFrame" src="resultFrame.html"></iframe>
</body>
</html>
resultFrame.html
<html>
<head>
<title>ResultPage</title>
<script type="text/javascript">
function Reset()
{
alert("reset (in resultframe)");
}
</script>
</head>
<body>
ResultPage
</body>
</html>
(Eu sei que document.all
não é recomendada, mas esta página só deve ser vista com IE internamente e eu não acho que esse é o problema)
Ao pressionar o botão Reset eu recebo "resultFrame encontrado" e "resultFrame.Reset não encontrado". Parece ter uma referência para o quadro, mas não pode chamar a função no quadro, por que isso?
Solução
Use:
document.getElementById("resultFrame").contentWindow.Reset();
para acessar a função de reposição no iframe
document.getElementById("resultFrame")
obterá o iframe em seu código, e contentWindow
vai ter o objeto de janela no iframe. Depois de ter a janela filho, você pode se referir a javascript nesse contexto.
Veja também AQUI em particular a resposta de bobince.
Outras dicas
Em vez de começar a moldura do documento, tente obter a estrutura do objeto de janela.
no exemplo mudança acima deste:
if (typeof (document.all.resultFrame.Reset) == "function")
document.all.resultFrame.Reset();
else
alert("resultFrame.Reset NOT found");
para
if (typeof (window.frames[0].Reset) == "function")
window.frames[0].Reset();
else
alert("resultFrame.Reset NOT found");
O problema é que o escopo do javascript dentro do iframe não está exposta através do elemento DOM para o iframe. apenas objetos janela contêm as informações javascript escopo para os quadros.
Para ainda mais robustez:
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
e
...
var el = document.getElementById('targetFrame');
var frame_win = getIframeWindow(el);
if (frame_win) {
frame_win.reset();
...
}
...
Chamada
window.frames['resultFrame'].Reset();
objectframe.contentWindow.Reset()
você precisa fazer referência ao elemento de nível superior no primeiro quadro.
A primeira e principal condição que precisa ser cumprida é que tanto o pai e iframe deve pertencer à mesma origem. Uma vez feito isto, a criança pode invocar o pai usando o método window.opener eo pai pode fazer o mesmo para a criança como mencionado acima
Quando você acessa resultFrame através document.all ele só puxa-lo como um elemento HTML, não uma moldura da janela. Você obtém o mesmo problema se você tiver um incêndio quadro um evento usando um "presente" auto-referência.
Substituir:
document.all.resultFrame.Reset();
Com:
window.frames.resultFrame.Reset();
Ou:
document.all.resultFrame.contentWindow.Reset();
Se você não pode usá-lo diretamente e se você encontrar esse erro: Bloqueado um quadro com origem " http: // www ..com" de acessar um quadro de origem cruzada. Você pode usar postMessage () vez de usar o função diretamente.