Referencing Mirrored Elements in an IFrame
Hey Everyone,
I have a JavaScript problem that has been puzzling me for hours now. Since I can't seem to come up with anything useful, I though I'd ask for your input. Here's the goal:- JS is executed on page load that clones the document structure (I don't believe you can just steal the child nodes of the document element, so I might just have to iterate through all objects and copy all of their properties) to a hidden IFrame that it positions off-page.
- Once the cloning is complete, event listeners are attached to most of the elements (excluding the IFrame and other hidden elements such as script tags) that wait for keystroke and other actions to occur. These actions are translated into changes on the original document, that is, modifications to properties of the elements acted on.
- When these changes occur, they need to be mirrored to the respective element in the IFrame (if a change is made to element#abc in the document, element#abc in the IFrame should be updated too). The problem here is that there is no guarantee that there is a unique way to refer to the mirror elements in the IFrame short of assigning all element开发者_StackOverflow中文版s a numerically stepped ID, which I would like to avoid if at all possible.
Demo:
Document
<html>
<body>
<iframe></iframe>
<div>a</div>
<div>b</div>
<div>a</div>
</body>
</html>
IFrame
<html>
<body>
<div>a</div>
<div>b</div>
<div>a</div>
</body>
</html>
If the "a" in the first div of the actual document was changed to "c" (By element.innerHTML, let's say), this change must be reflected in the corresponding div (first one) in the IFrame.
Can you guys and gals think of a way to make this possible?
Thanks & Cheers,
PhpMyCoderI apologize if this is a bit vague. I'm attempting to not get too specific so others can benefit from any answers given. If you would like a more concise explanation, I can edit one in. Also, sorry for not providing code here. This is more of a theory question, so you I didn't think specific code was necessary. Again, if you require it, I can append it to this question.
Your incremented key doesn't have to be assigned to the cloned element's ID, it could be any arbitrary attribute (I've noticed jQuery does this, not sure what triggers it though). However, I'm not sure what would be the best way to then find the cloned element again, short of iterating every one (or using a library like jQuery, which sounds like it might not be a bad suggestion in this case).
Another option would be to save the cloned element in the original when you create the clone. Since DOM nodes are just Javascript objects, you can add any property you like. So you might do:
var clone = node.cloneNode(true);
node.clonedNode = clone;
// Add clone to iframe document
(not sure if cloneNode will work for the entire document, also looks like you might need importNode instead since you're adding it to a different document)
Then in the event listener:
var clone = event.target.clonedNode;
Would be interested to know if this works reliably across browsers!
Also, take a look at this answer to a similar question, where the solution would be to use a dictionary with original element as the key and the cloned element as the value.
加载中,请稍侯......
精彩评论