我有两个 html 文件:
父级.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>
我希望按下第一个对象元素呈现的按钮将提醒其父元素的数据消息(“hello”)。第二个按钮也是如此，由带有第二条消息(“world”)的第二个对象呈现。
考虑到我只能处理 child.html 文件中的脚本。
最佳答案
您必须让其他公司更改 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));
但我认为这不仅仅是消息。
因此，您必须让另一家公司在对象或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 不处于“兼容”模式)。
关于javascript - 从子级 html 访问 <object> 父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31696344/