Chamar função javascript em iframe

StackOverflow https://stackoverflow.com/questions/1600488

  •  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?

Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top