Question

我有两个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>

我希望按下第一个对象元素呈现的按钮将提醒其父元素的数据消息（＆＃34; hello＆＃34;）。第二个按钮和第二个消息（＆＃34; world＆＃34;）呈现的第二个按钮相同。

请注意，我只能使用child.html文件中的脚本。

Answer 1

您必须让另一家公司更改parent.html一些;如果您没有，并且父HTML中确实有多个child.html引用，则子窗口无法分辨哪个引用与之相关。子窗口可以访问父窗口，但不能访问包含它们的元素（object或iframe）。

如果它只是一条消息，请让另一家公司将消息传递给查询字符串上的子项而不是data-message属性：

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

然后：

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

但我认为它不仅仅是信息。

因此，您必须让另一家公司在object或iframe上添加某种类型的标记，以便您可以告诉另一方。

例如：

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

然后在child.html中，您可以在处理按钮点击时执行此操作：

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

或作为单行：

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

适用于Chrome，Firefox和IE11（如果IE11不是＆＃34;兼容性＆＃34;模式）。

从子html访问<object> parent

1 个答案: