时间戳

首页 > 解决方案 > 镜子

和跨 iframe 的复选框状态

javascript - 镜子
和跨 iframe 的复选框状态

问题描述

我有一个 iFrame 可以在其内部加载其父页面。因此，同一页面的两个副本；一个在 iFrame 中，一个不在。

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

我已经解决了每个部分（请参阅// 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，反之则不行？

谢谢！

标签： javascripthtml

解决方案

这是一个演示您想要的行为的复制品，通常遵循您的模式：

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

没有完整的代码很难说，但这里有一些需要考虑的事情：

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

    • 请改用该toggle事件，它会在属性更新后触发。open

  2. 假设它不是第一个代码块中的错字，parent是对父窗口的引用，而不是它的文档。

    • 改为使用parent.document.getElementById。

推荐阅读