Javascript 获取可编辑iframe ONDBL中元素的属性单击

我正在使用javascript和可编辑的iframe开发一个wysiwyg HTML编辑器。在开发该编辑器之前，我对使用javascript和iFrame（包括）的其他HTML编辑器进行了一些研究，其中有一个特性我正在努力复制

在一些基于iframe/JS的HTML编辑器中，如果用户希望访问或编辑元素的属性（例如图像维度、超链接url、表格宽度），他们只需双击元素，就会出现一个模式div，其中包含该元素和/或该元素中元素的属性值的文本框

到目前为止，我最接近于开发这样一个特性的是创建一个脚本，该脚本可以提醒用户双击iframe中某个区域的HTML代码。我将此代码添加到我的HTML页面

<iframe name="wysiwyg" id="wysiwyg" onload="dblClick();"></iframe>

问题是，此代码仅在用户双击并突出显示一段文本时有效，例如，双击一段粗体文本将向用户提示此代码

<b>text</b>

文本

我双击的任何其他内容都会提示错误消息。此外，它只能在Internet Explorer中正常工作。当我在Firefox、Opera、Chrome和Safari中测试它时，脚本要么不工作，要么工作不正常（在Firefox中，一旦加载页面，脚本就会发出错误消息）

我需要的是一个脚本，允许最终用户查看他们在可编辑iframe中双击的任何元素的所有属性，并在所有主要浏览器中工作

var iframeWin;

function dblClick() {
    iframeWin = document.getElementById("wysiwyg").contentWindow;
    iframeWin.document.ondblclick = dblClicked;
}

function dblClicked(evt) {
    evt = evt || iframeWin.event;
    var target = evt.target || evt.srcElement;
    alert(target.tagName);
}

我知道简单地使用现有的所见即所得编辑器会更容易，但我更喜欢从头开始创建自己的编辑器，因为我喜欢这个挑战。另外，我知道CKEditor似乎没有使用像我这样的iframe，但我引用它作为我希望实现的那种功能的示例

---

任何帮助都将不胜感激。

我建议将问题分为可管理的部分来解决，而不是试图一下子把所有问题都集中起来。例如，我会将其分解为：

首先，找出需要实现哪些代码才能在当前网页上提供所需的双击行为。这可能需要一些简单的代码来迭代地将双击处理程序分配给页面上的每个元素，而不仅仅是

元素本身。这最终是将在

中运行的代码，您可以通过将其直接附加到

HTML，或通过在调用页面的上下文中运行一些代码（如您当前所做的）将其放在那里

如有必要，重构双击处理程序实现，以便调用一个函数，该函数将传递处理对任何元素的单击所需的所有信息。在易于访问的范围内定义此函数，如

窗口。\u doubleClickHandler

。此函数定义属于

的内部

删除您在步骤2中提出的函数定义，但保留所有引用/使用它的代码。现在，您的封闭页面有了一个方便的接口，可以与来自

的点击事件进行交互

加载

时，封闭页面可以为您在步骤2中定义并在步骤3中删除的函数提供自己的定义

---

如果您完成了所有这些，我建议您可以做更多有用的事情，然后在其中显示一个带有单击元素标记的警报。如在HTML编辑器中自动选择/突出显示相应的标记，或将标记片段加载到可编辑的lightbox UI中，用户可以在其中进行更改，然后将其自动应用于正在编辑的HTML文档。

这里有各种问题/误解：

• 您只使用IE的旧选择和

  TextRange

  API，这在其他浏览器中不受支持
• 您似乎不确定如何访问iframe的文档，并且不必要地附加了两次

  dblclick

  处理程序
• CKEditor确实使用iframe

我建议跳过选择内容，使用事件委派来获取双击的元素，这将在所有主要浏览器中都适用

var iframeWin;

function dblClick() {
    iframeWin = document.getElementById("wysiwyg").contentWindow;
    iframeWin.document.ondblclick = dblClicked;
}

function dblClicked(evt) {
    evt = evt || iframeWin.event;
    var target = evt.target || evt.srcElement;
    alert(target.tagName);
}

---

我明白你的意思，我意识到我问的问题太多了，一个问题也回答不了。当我有更多的时间的时候，我会更详细地看我的问题，并把它分解成几个问题。感谢您提供的指导。我知道CKEditor不使用iFrame。我把它作为我最终想要实现的功能的一个例子。我使用了您发布的代码，但它似乎没有任何作用。我双击iframe中的元素，但什么也没发生。基本上，我所做的就是用您的函数替换旧的dblClick（）和dblClicked（）函数。我不确定我会错在哪里。任何帮助都将不胜感激。您的代码确实有效。问题是，它只适用于IE、Chrome和Safari。它只在iframe不处于设计模式（这对于所见即所得编辑器来说毫无意义）的情况下在Firefox中起作用，而在Opera中根本不起作用（打开或关闭设计模式）。@siberantiger:有趣。我会试着调查一下。非常感谢。顺便说一下，如果您需要查看我正在使用的代码，我会将其全部放在我之前发布的问题中。我不知道这是否有帮助，但我正在使用最新版本的Firefox和Opera（最新版本是2011年8月中旬，尽管我认为我的Opera版本自那时以来已经自我更新）。我只是想提一下。