javascript - 跨 iframe 镜像 和复选框状态

Question

我有一个 iFrame，它在自身内部加载其父页面。所以，同一页的两个副本；一个在 iFrame 中，一个不在。

我正在尝试镜像 <input type="checkbox"> 的状态checked/unchecked和 <details> open/closed在主页和 iFrame 之间。

我已经解决了每个问题(请参阅 // comments 了解问题)，在 click 上触发事件:

对于复选框，我有

let boxes = document.querySelectorAll('input[type="checkbox"]');

for (let box of boxes)) {
    myIFrame.getElementById(box.id).checked = box.checked; // works
    if (inIFrame) {parent.getElementById(box.id).checked = document.getElementById(box.id).checked; // doesn't work
}

(上面的条件 inIFrame 只是检查页面是否加载到 iFrame 中的测试的简写)

对于 <details>

let detailEls = document.querySelectorAll('details');

for (let i = 0; i < detailEls.length; i++) {
  myIFrame.querySelectorAll('details')[i].open = querySelectorAll('details')[i].open; // works, but 1-click behind
  }

但奇怪的是，这落后了一次点击。因此，如果我单击、单击、单击以打开主页上的详细信息 A、B、C，只有 A、B 会在 iFrame 中打开 -- 下一次单击时，C 将打开。

如果不清楚，这里是我的问题摘要:

1. 为什么 <details>状态滞后？这似乎与复选框的策略相同，但结果不同。
2. 为什么检查状态只从主页镜像到 iFrame，反之则不行？

谢谢!

Answer 1

这是一个复制品，它展示了您想要的行为，通常遵循您的模式:

https://stackblitz.com/edit/so-mirror-iframe?file=lib/script.js

如果没有完整的代码很难判断，但这里有一些事情需要考虑:

1. 如果您在详细信息上使用 click 事件，这可能会给您带来“滞后”行为。事实证明，对于详细信息，click 事件发生在 其 open 属性更新之前。当您的同步器运行时，您刚刚单击的那个总是以错误的状态读取。

   • 改为使用 toggle 事件，在 open 属性更新后触发。

2. 假设它不是第一个代码块中的拼写错误，parent 是对父 window 的引用，而不是它的 document .

   • 改用 parent.document.getElementById。