如何用document.evaluate点击iframe内按钮？Windy嵌入应用自动播放失败求助

问题场景 #

希望页面加载时自动触发嵌入Windy应用的播放功能，但使用document.evaluate的代码无法实现效果。

代码示例 #

JavaScript代码

var iframe = document.getElementById("frameID");
var elmnt = iframe.contentWindow.document.evaluate(
  '//*[@*[starts-with(name(), "data-ref")]="play"]',
  document,
  null,
  XPathResult.ANY_TYPE,
  null
).iterateNext().click()

HTML代码

<html>
<body>

<iframe id="frameID" width="650" height="450" src="https://embed.windy.com/embed2.html?lat=28.855&lon=-81.687&detailLat=28.855&detailLon=-81.687&width=650&height=450&zoom=5&level=surface&overlay=radar&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>

</body>
</html>

问题原因 #

• 跨域同源策略拦截：Windy嵌入页面属于第三方域名，浏览器的同源策略禁止父页面访问跨域iframe内部的DOM。iframe.contentWindow.document的访问会被直接阻止，后续的元素查找和点击操作根本无法执行。
• XPath上下文错误：document.evaluate的第二个参数传入的是当前页面的document，而非iframe内部的文档对象。即使没有跨域问题，这个错误也会导致XPath在父页面DOM中查找，找不到目标元素。
• 未等待iframe加载完成：代码在页面加载后立即执行，此时iframe内部的DOM还未渲染完毕，XPath无法定位到播放按钮元素。

可行解决思路 #

Windy官方嵌入功能通常提供参数来控制自动播放，无需手动操作DOM。可以查看Windy的嵌入文档，添加官方支持的自动播放参数到iframe的src链接中（例如类似autoplay=1的参数，具体以官方说明为准）。

内容的提问来源于stack exchange，提问作者KevsfastZ