2011-03-01 48 views
0

嘿大家,
我有一個JavaScript問題,一直困擾我幾個小時了。因爲我似乎無法提出任何有用的東西,所以我會問你的意見。這裏的目標:引用IFrame中的鏡像元素

  1. JS是在頁面加載執行的克隆文件結構(我不相信你可以偷的文檔元素的子節點,所以我可能只是有過的所有對象進行迭代和將其所有屬性複製到它位於頁外的隱藏IFrame中。
  2. 克隆完成後,事件監聽器會附加到等待鍵擊和其他操作發生的大多數元素(不包括IFrame和其他隱藏元素,如腳本標記)。這些操作將轉換爲原始文檔的更改,即對元素的屬性進行修改。
  3. 發生這些更改時,需要將它們映射到IFrame中的相應元素(如果更改了文檔中的元素#abc,IFrame中的元素#abc也應該更新)。這裏的問題是,不能保證有一種獨特的方式來引用IFrame中的鏡像元素,而不用爲所有元素分配一個數字級別的ID,我想盡可能避免這種情況。

演示:

文獻

<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> 

如果 「一個」 在實際的文件的第一個div改變爲「C 「(通過element.innerHTML,讓我們來說),這個改變必須是refl在IFrame中的相應div(第一個)中進行。

你們能和傢伙們想辦法讓這成爲可能嗎?

感謝&乾杯,
PhpMyCoder


我道歉,如果這是一個有點模糊。我試圖不太明確,以便其他人可以從任何答案中獲益。如果您想要更簡潔的解釋,我可以編輯一個。 另外,抱歉在此處未提供代碼。這更多的是一個理論問題,所以你我不認爲特定的代碼是必要的。再次,如果你需要它,我可以將它附加到這個問題上。

回答

1

你遞增的鍵不必被分配給克隆元素的ID,它可以是任意的屬性(我注意到jQuery做到了這一點,不知道是什麼觸發它)。然而,我不確定什麼是再次找到克隆元素的最好方法,而不是迭代每一個元素(或者使用像jQuery這樣的庫,在這種情況下聽起來可能不是一個壞建議)。

另一種選擇是在創建克隆時將克隆的元素保存在原始文件中。由於DOM節點只是Javascript對象,因此您可以添加任何您喜歡的屬性。所以,你可以做:

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

(不知道cloneNode將整個文檔時,也像你可能需要importNode,而不是因爲你將它添加到不同的文件)

然後在事件收聽者:

var clone = event.target.clonedNode; 

想知道這是否可以跨瀏覽器可靠工作!

此外,看看this answer到一個類似的問題,其中解決方案將使用與原始元素作爲關鍵字和克隆元素作爲值的字典。

+0

優秀的解決方案!我將彙集一些代碼來看看它是如何工作的。我會在有東西時發帖。感謝您的輸入! – 2011-03-01 23:00:46