如何从JavaScript访问父iframe

2020/10/23 11:02 · javascript ·  · 0评论

好吧,我有一个IFrame,它调用了相同的域页面。我的问题是,我想从这个被调用的页面(通过JavaScript)访问该父iframe的某些信息。如何访问此iframe?

详细信息:由于我正在对Windows环境进行编程,因此有几个这样的iframe可以加载相同的页面。我打算关闭此iframe,这就是为什么我需要知道应该从他内部关闭哪个框架。我有一个数组,保留对这些iframe的引用。

编辑:有iframe是动态生成的

您也可以将名称和ID设置为相等的值

<iframe id="frame1" name="frame1" src="any.html"></iframe>

这样您就可以在子页面中使用下一个代码

parent.document.getElementById(window.name);

只需window.frameElement从框架页面致电即可如果页面是不是在一个框架,然后frameElementnull

另一种方法(将window元素放入框架内比较简单),但出于完整性考虑:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

我建议使用postMessage API

在您的iframe中,致电:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

在页面中,您将包含iframe,您可以侦听以下事件:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

顺便说一句,还可以调用其他窗口,而不仅仅是iframe。

了解更多关于的postMessage API约翰Resigs博客在这里

老问题,但我只是遇到了同样的问题,并找到了获取iframe的方法。只需迭代父窗口的frames []数组,然后针对运行代码的窗口测试每个框架的contentWindow即可。例:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

或者,使用jQuery:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

此方法节省了为每个iframe分配ID的时间,这对于动态创建iframe很有用。我找不到更直接的方法,因为您无法使用window.parent获取iframe元素-它直接进入父窗口元素(跳过iframe)。因此,遍历它们似乎是唯一的方法,除非您想使用ID。

您可以parent用来访问父页面。因此,要访问一个函数,它将是:

var obj = parent.getElementById('foo');

设置iframe的ID后,您可以从内部文档访问iframe,如下所示。

var iframe = parent.document.getElementById(frameElement.id);

在IE,Chrome和FF中效果很好。

也许只用

window.parent

进入您的iframe以获取调用框架/窗口。如果有多个呼叫帧,则可以使用

window.top

尝试此操作,在您的父框架中设置如下所示的IFRAME:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

请注意,每个帧的ID在src中作为锚传递。

然后在您的内部html中,您可以通过location.hash访问加载的帧的ID:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

那么您可以访问parent.document.getElementById()从iframe内部访问iframe广告代码

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}
本文地址:http://javascript.askforanswer.com/ruhecongjavascriptfangwenfuiframe.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!