<div class="content" style="height: 100%;" > <iframe width='100%' height='100%' frameBorder='0' src='https://zt.changjing.com.cn/map/8kUyMJ-dCOknRL7Ntn5y9w/embed?base_map=normal¢er=113.22956797%2C23.407374725&level=16' style="height:1000px;"></iframe> <script> window.onload = function() { document.querySelector('input[type="password"]').value = "110110"; } </script> </div> 不起作用,如何修改
时间: 2024-02-25 21:52:03 浏览: 72
可能的原因是因为跨域安全策略(Same-Origin Policy)的限制导致无法访问 `iframe` 内部的元素。为了解决这个问题,可以使用 `postMessage` API 实现跨域通信,将自动填充密码的操作放到 `iframe` 内部的脚本中执行。
以下是修改后的代码:
```html
<div class="content" style="height: 100%;">
<iframe
id="my-iframe"
width="100%"
height="100%"
frameborder="0"
src="https://zt.changjing.com.cn/map/8kUyMJ-dCOknRL7Ntn5y9w/embed?base_map=normal¢er=113.22956797%2C23.407374725&level=16"
style="height:1000px;"
></iframe>
<script>
window.addEventListener("message", function (event) {
if (event.data === "fill-password") {
var passwordInput = document.querySelector('input[type="password"]');
if (passwordInput) {
passwordInput.value = "110110";
}
}
});
</script>
<script>
var iframe = document.getElementById("my-iframe");
iframe.onload = function () {
iframe.contentWindow.postMessage("fill-password", "*");
};
</script>
</div>
```
此代码会在 `iframe` 加载完成后,向 `iframe` 发送一条消息,告诉 `iframe` 内部的脚本需要自动填充密码。`iframe` 内部的脚本接收到消息后,检查是否有密码输入框,如果有则自动填入密码。注意,在 `postMessage` 中指定了接收消息的窗口为 `*`,这意味着可以从任何域名接收消息,这样就可以避免跨域限制。
阅读全文