从iframe外部调用iframe内部的函数[重复]

Posted 2023-03-05

【中文标题】从iframe外部调用iframe内部的函数[重复]

【英文标题】：Calling a function inside an iframe from outside the iframe [duplicate]

【发布时间】：2010-12-12 09:42:22

【问题描述】：

我有一个带有 iframe 的页面。在那个 iframe 里面我有一个这样的 javascript 函数：

function putme() 

如何在主页面调用这个函数？

【参考方案1】：

如果 iframe 与外部页面位于不同的域中，则非常困难，或者根本没有。

一般而言，浏览器会阻止 javascript 访问来自不同域的代码，但如果您控制这两个页面，则有一些技巧可以使某些东西正常工作。或多或少。

例如，您可以从外部更改 iFrame 的 URL 片段，从 iframe 内部轮询片段并调用该函数。窗口名称也有类似的技巧。

【参考方案2】：

您可以使用 iframe 的名称访问 iframe：

foo.putme();

在 iframe 页面内全局声明的函数将成为该 iframe 的窗口对象的成员。您可以使用 iframe 的名称访问 iframe 的窗口对象。

为此，您的 iframe 需要具有 name 属性：

<iframe name="foo" ...>

另外，主页和 iframe 页面应该来自同一个域。

【讨论】：

我在firebug中调试它说：m.contentwindow.putmap is not a function

【参考方案3】：

为框架命名和 id - 两者相同。 window.frameNameOrId_.functionName()

两个框架必须在同一个域中（尽管有一些方法可以在一定程度上解决这个问题）

【参考方案4】：

在框架集上，为您的框架指定一个名称，然后在主页中您可以通过其给定名称访问框架：

window.[FrameName].putme();

【参考方案5】：

window.frames['frameName'].putme();

请注意，这通常仅在 iframe 引用同一域中的页面时才有效。出于安全原因，浏览器限制对属于不同域的框架内的页面的访问。

【参考方案6】：

为了更加稳健：

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.putme();
  ...

...

【参考方案7】：

这可以通过 JavaScript 完成：

window.top.location.href = url;

在所有主流浏览器中都能完美运行。