javascript - 如何使用 javascript 或 jquery 从 iframe 获取完整源代码?

标签 javascript jquery html iframe

我很无奈。我需要使用 Javascript 或 Jquery 从 iframe 获取源代码。

iframe 的源文件在同一域中。这是我的 iframe:

<iframe src="/source_file.html" id="iframe_id"></iframe>

我正在使用以下非常著名的语法从 iframe 获取源代码:

document.getElementById("iframe_id").contentWindow.document.body.innerHTML

但是使用这段代码,我只能获取 BODY 元素内的代码。我想获取从 <!doctype html> 到 的完整代码。

请帮帮我。

最佳答案

请记住,为了做到这一点,您必须满足 same-origin policy .

您可以使用 documentElement 将大部分当前 DOM 获取为 HTML而不是 bodyouterHTML而不是 innerHTML

console.log(document.getElementById('iframe_id').contentDocument.documentElement.outerHTML);

请注意,这将排除文档类型和任何不是 HTML 节点子节点的注释。

如果您还想包含该信息,您可以遍历子元素。

function getIframeHtml(iframe) {
    const s = new XMLSerializer();
    let html = '';
    let e = iframe.contentDocument.firstChild;
    do {
        html += 'outerHTML' in e ? e.outerHTML : s.serializeToString(e);
        e = e.nextSibling;
    } while (e);
    return html;
}

console.log(getIframeHtml(document.getElementById('iframe_id')));

请注意,此 HTML 代码可能与原始 HTML 代码不完全匹配(浏览器规范化或 JavaScript 可能会更改它)。为此,您必须使用 AJAX 将 HTML 读取为文本。

关于javascript - 如何使用 javascript 或 jquery 从 iframe 获取完整源代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25678366/

相关文章:

php - 快速 [php 函数] -> [javascript 函数] 问题

javascript - 使用 PHP、websocket 和 MySQL 聊天

javascript - 如何创建 JavaScript 库

jquery - 单击按钮时暂时禁用悬停 (jQuery)

javascript - 如何将多个对象的值合并到数组对象中?

jquery - 如何为选定的日期选择器日期着色?

javascript - 使用 jQuery 切换基于两组复选框的各种 div 的可见性?

html - HTML 中的参数名称和值

php - 包含父目录中的页眉和页脚但不显示 css

javascript - 保持 Logo 图像纵横比的灵活标题