从子html访问 parent

I have two html files:

我有两个html文件:

parent.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Parent</title>
    </head>

    <body>
        <object data="child.html" data-message="hello"></object>
        <object data="child.html" data-message="world"></object>
    </body>

</html>

child.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Child</title>
    </head>

    <body>
        <button onclick="alert('hello world');">press me</button>
    </body>

</html>

I would like that pressing the button rendered by the first object element will alert the data-message of its parent ("hello"). The same for the second button, rendered by the second object with the second message ("world").

我希望按下第一个对象元素呈现的按钮将提醒其父元素的数据消息(“hello”)。对于第二个按钮,第二个按钮(“世界”)呈现的第二个按钮也是如此。

Consider that I can only work on the scripts in the child.html file.

考虑到我只能处理child.html文件中的脚本。

1 个解决方案

#1

You'll have to have the other company change parent.html some; if you don't, and there are really multiple child.html references in the parent HTML, the child window can't tell which one relates to it. The child windows have access to the parent window, but not to the element (object or iframe) that contains them.

你必须让另一家公司更改parent.html;如果不这样做,并且父HTML中确实有多个child.html引用,则子窗口无法分辨哪个引用与它相关。子窗口可以访问父窗口,但不能访问包含它们的元素(对象或iframe)。

If it's just a message, have the other company pass the message to the child on the query string rather than as a data-message attribute:

如果它只是一条消息,请让另一家公司将消息传递给查询字符串上的子项,而不是作为数据消息属性:

<object data="child.html?hello"></object>
<object data="child.html?world"></object>

Then:

alert(location.search.substring(1));

But I assume it's about more than just the message.

但我认为这不仅仅是消息。

So you'll have to have the other company put some kind of marker on the object or iframe that allows you to tell one from the other.

因此,您必须让另一家公司在对象或iframe上放置某种标记,以便您可以从另一个中分辨出来。

For example:

<object data="child.html?1" data-child="1" data-message="hello"></object>
<object data="child.html?2" data-child="2" data-message="world"></object>

Then in child.html, you can do this when handling the button click:

然后在child.html中,您可以在处理按钮单击时执行此操作:

var childId = location.search.substring(1);
var element = parent.document.querySelector("[data-child='" + childId + "']");
var message = element.getAttribute("data-message");
alert(message);

or as a one-liner:

或作为一个班轮:

alert(parent.document.querySelector("[data-child='" + location.search.substring(1) + "']").getAttribute("data-message"));

This works in Chrome, Firefox, and IE11 (provided IE11 isn't in "compatibility" mode).

这适用于Chrome,Firefox和IE11(如果IE11不处于“兼容”模式)。

#1