堆棧內存溢出
  簡體   English   中英

在 iframe 中調用 javascript 函數

[英]Calling javascript function in iframe

 原文  2009-10-21 12:30:02  7   9    javascript/ function/ iframe

問題描述

我在從父頁面調用iframe的 JavaScript 函數時遇到問題。 這是我的兩個頁面：

主頁.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>

結果框架.html

<html>
<head>
    <title>ResultPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            alert("reset (in resultframe)");
        }
    </script>
</head>
<body>
    ResultPage
</body>
</html>

（我知道不推薦使用document.all但此頁面只能在內部使用 IE 查看，我認為這不是問題）

當我按下重置按鈕時，我得到“resultFrame found”和“resultFrame.Reset NOT found”。 好像有frame的引用，但是不能調用frame上的函數，這是為什么呢？

9 個解決方案

解決方案1
 130 已采納  2009-10-21 12:38:20

用：

document.getElementById("resultFrame").contentWindow.Reset();

訪問 iframe 中的重置功能

document.getElementById("resultFrame")將在您的代碼中獲取 iframe，而contentWindow將在 iframe 中獲取窗口對象。 一旦有了子窗口，就可以在該上下文中引用 javascript。

另請參閱此處，特別是 bobince 的回答。

解決方案2
 6  2012-08-03 13:05:39

為了更加穩健：

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;
}

和

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.reset();
  ...
}
...

解決方案3
 5  2009-10-21 12:43:47

不要從文檔中獲取框架，而是嘗試從窗口對象中獲取框架。

在上面的例子中改變這個：

if (typeof (document.all.resultFrame.Reset) == "function")
    document.all.resultFrame.Reset();
else
    alert("resultFrame.Reset NOT found");

到

if (typeof (window.frames[0].Reset) == "function")
    window.frames[0].Reset();
else
    alert("resultFrame.Reset NOT found");

問題是 iframe 內 javascript 的范圍沒有通過 iframe 的 DOM 元素公開。 只有窗口對象包含框架的 javascript 范圍信息。

解決方案4
 4  2009-10-21 12:38:21

稱呼

window.frames['resultFrame'].Reset();

解決方案5
 3  2009-10-21 12:38:20

objectframe.contentWindow.Reset()您首先需要引用框架中的頂級元素。

解決方案6
 2  2015-05-27 21:32:56

需要滿足的首要條件是父級和 iframe 應該屬於同一個源。 完成后，子進程可以使用 window.opener 方法調用父進程，父進程也可以對子進程執行上述操作

解決方案7
 0  2009-10-21 12:42:47

當您通過 document.all 訪問 resultFrame 時，它​​只會將其作為 HTML 元素而不是窗口框架拉取。 如果框架使用“this”自引用觸發事件，則會遇到同樣的問題。

代替：

document.all.resultFrame.Reset();

和：

window.frames.resultFrame.Reset();

或者：

document.all.resultFrame.contentWindow.Reset();

解決方案8
 0  2018-02-28 19:10:40

如果您無法直接使用它並且遇到此錯誤：阻止了一個帶有“ http://www ..com”源的框架訪問跨源框架。 您可以使用postMessage()而不是直接使用該函數。

解決方案9
 0  2021-03-24 14:10:47

從<iframe>調用尊重隱私的XMLHttpRequest

HTML：

<iframe id="iframe"></iframe>

JavaScript：

const iframe    = document.getElementById('iframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;

let script = iframeDoc.createElement('SCRIPT');

script.append(`function sendWithoutOrigin(url) {
    let request = new XMLHttpRequest();

    request.open('GET', url);

    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE) {
            if(request.status === 200) {
                console.log('GET succeeded.');
            }
            else {
                console.warn('GET failed.');
            }
        }
    }
    request.send();
}`);

iframeDoc.documentElement.appendChild(script);

JavaScript 喚起：

let url  = 'https://api.serivce.net/';
    url += '?api_key=' + api_write_key;
    url += '&field1=' + value;

iframeWin.sendWithoutOrigin(url);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從iframe調用JavaScript函數 iframe在另一個iframe中調用javascript函數？ 在通過Fancybox彈出窗口打開的iFrame中調用javascript函數 在iframe的父級的javascript外部文件中調用函數 在Iframe中調用父頁面JavaScript函數 在子 iframe 節點中調用 Javascript function iframe調用父javascript 有沒有辦法找出哪個iframe正在調用父級的JavaScript函數 不會在Flex-iFrame html中調用JavaScript函數 在位於iframe中的.js文件中調用javascript函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM