Javascript 在IFrame中引用镜像元素_Javascript_Dom_Iframe

Javascript 在IFrame中引用镜像元素

javascript dom iframe

Javascript 在IFrame中引用镜像元素,javascript,dom,iframe,Javascript,Dom,Iframe,大家好，我有一个JavaScript问题，这个问题已经困扰了我好几个小时了。既然我似乎想不出什么有用的东西，我想征求你的意见。目标如下： JS是在页面加载时执行的，它将文档结构（我不相信您可以窃取document元素的子节点，所以我可能只需要遍历所有对象并复制它们的所有属性）克隆到一个隐藏的IFrame，并将其放置在页面外克隆完成后，事件侦听器将附加到等待击键和其他操作发生的大多数元素（不包括IFrame和其他隐藏元素，如脚本标记）。这些操作将转换为对原始文档的更改，即对所操作元素的属性的修

大家好，
我有一个JavaScript问题，这个问题已经困扰了我好几个小时了。既然我似乎想不出什么有用的东西，我想征求你的意见。目标如下：

JS是在页面加载时执行的，它将文档结构（我不相信您可以窃取document元素的子节点，所以我可能只需要遍历所有对象并复制它们的所有属性）克隆到一个隐藏的IFrame，并将其放置在页面外

克隆完成后，事件侦听器将附加到等待击键和其他操作发生的大多数元素（不包括IFrame和其他隐藏元素，如脚本标记）。这些操作将转换为对原始文档的更改，即对所操作元素的属性的修改

当发生这些更改时，需要将它们镜像到IFrame中的相应元素（如果文档中的元素#abc发生更改，IFrame中的元素#abc也应更新）。这里的问题是，除了为所有元素指定一个数字阶梯ID（如果可能的话，我希望避免）之外，无法保证在IFrame中有唯一的方法来引用镜像元素

演示：

文档

<html>
<body>
    <iframe></iframe>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>


A.
B
A.

IFrame

<html>
<body>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>


A.
B
A.

如果实际文档的第一个div中的“a”被更改为“c”（比如，通过element.innerHTML），那么这个更改必须反映在IFrame中相应的div（第一个div）中

你们能想出一个办法让这成为可能吗

谢谢和干杯，
PhpMyCoder

如果这有点含糊，我道歉。我不想说得太具体，这样其他人就可以从给出的任何答案中受益。如果您想要更简洁的解释，我可以在中编辑一个。

另外，很抱歉没有在这里提供代码。这更多的是一个理论问题，所以我认为没有必要编写特定的代码。同样，如果您需要它，我可以将它附加到这个问题中。

您的递增键不必分配给克隆元素的ID，它可以是任意属性（我注意到jQuery会这样做，但不确定是什么触发它）。但是，除了迭代每个元素（或者使用类似jQuery的库，在这种情况下，这听起来可能不是一个坏建议）之外，我不确定再找到克隆元素的最佳方法是什么

另一个选项是在创建克隆时将克隆的元素保存为原始元素。因为DOM节点只是Javascript对象，所以可以添加任何您喜欢的属性。所以你可以这样做：

var clone = node.cloneNode(true);
node.clonedNode = clone;
// Add clone to iframe document

（不确定

cloneNode

是否适用于整个文档，而且由于要将其添加到另一个文档中，您可能需要使用它）

然后在事件侦听器中：

var clone = event.target.clonedNode;

我想知道这是否能在浏览器间可靠地工作

另外，请看一个类似的问题，解决方案是使用字典，原始元素作为键，克隆元素作为值。

非常好的解决方案！我将整理一些代码，看看它是如何工作的。我有东西就发。谢谢你的意见！