使用 Javascript / jQuery 从 iframe 中选择 HTML答案

【问题标题】：Select HTML from iframe using Javascript / jQuery使用 Javascript / jQuery 从 iframe 中选择 HTML
【发布时间】：2017-02-17 12:47:50
【问题描述】：

下面是一个javaScript 函数，用于从iframe 中获取选定的内容

function getIframeSelectionText(iframe) {
    var win = iframe.contentWindow;
    var doc = win.document;

    if (win.getSelection) {
        return win.getSelection();
    } else if (doc.selection && doc.selection.createRange) {
        return doc.selection.createRange();
    }
}

示例iframe 如下所示：

<iframe id="iframeId" type="html" src="__FILE_PATH__" width="100%" height="750px;"></iframe>

实现如下：

var content = getIframeSelectionText(document.getElementById("iframeId"));

我得到的是选择的文本。我需要HTML（因为我也想抓图）

我尝试将.html() 添加到getSelection()，但没有成功。解决方案也可以涉及jQuery。

如何前进？

---编辑---

在这里可以找到一个关闭提示：window.getSelection() gives me the selected text, but I want the HTML

这里有对Selection 对象的引用：https://developer.mozilla.org/en-US/docs/Web/API/Selection

---可能的解决方案---

这是我面临的类似（不一样）问题的解决方案：https://stackoverflow.com/a/124929/2284357 另一个是Get Selected HTML in browser via Javascript

【问题讨论】：

标签： javascript jquery html iframe selection

【解决方案1】：

这将返回选定的文本节点

let node = iframe.contentWindow.getSelection().baseNode

之后可以用来获取父节点HTML

let html = node.parentElement.innerHTML

【讨论】：

谢谢。然而，并非所有选择的内容都在 .baseNode 内
Selection 对象中包含选定 HTML 的部分会有所帮助。或者如何解析对象。
选择对象不包含实际的 HTML，可以使用 getSelection().toString() 将其转换为字符串，但为了获得 HTML 本身，您应该使用提供的 baseNode、focusNode、anchorNode 或 extendNode选择对象
好提示。 toString() 仅返回文本。 HTML 可以在 anchorNode 和 focusNode 之间找到

【解决方案2】：

这应该会让你走上正确的道路......

$("body").on("click","#iframeId",function(){ 
    $(this).contents().find("html").html();

【讨论】：

请原谅我对 JS 的了解。 "load" 是 onload 事件吗？我实际上需要它来处理click 事件和鼠标选择的html。
抱歉，不知道为什么我认为您可能会在加载时尝试收集 html。这是一个点击选项... $("body").on("click","#iframeId",function(){
我已经用这个点击修改更新了答案。我假设您在用户单击时尝试获取#iframeID 的html 内容。
到目前为止它正在工作。但正如我的问题一样，我实际上是在寻找用户选择的 html。我认为应该在find() 中插入一个变量，因为我不想抓取整个 HTML。
对不起。你原来的问题对我来说有点含糊不清。您可以在 .find() 中指定要定位的元素、类或 ID。示例：$(this).find('#bookmark');