如何在JavaScript中将HTML文档转为字符串并通过jQuery加载到自定义窗口

查看完整项目（详见js/experience.js）

我正在用jQuery给网站做“应用程序”，现在卡在怎么把指定HTML文档的内容提取成字符串，实现双击按钮打开包含该HTML内容的窗口。

当前能运行的代码是：

$('.openbuttonapp').dblclick(function () {
    var $objWindow = $('<div class="window"> Put me in, Coach! </div>');
});

这段代码能通过字符串创建带HTML元素的窗口，但没法便捷修改样式、组织组件，太麻烦。

我原本想这么写，但跑不起来：

var entireDocumentHTMLAsAString = document.documentElement.innerHTML;

$('.openbuttonapp').dblclick(function () {
    var $objWindow = $(entireDocumentHTMLAsAString);
});

补充说明：
我不想手动写字符串，想简洁引用完整HTML页面，把窗口里的内容换成任意HTML文档的内容。

解决方法 #

1. 用jQuery的load()方法（最简便） #

load()可以直接把外部HTML文件的内容加载到指定元素里，先创建窗口容器，再加载目标内容：

$('.openbuttonapp').dblclick(function () {
    // 创建窗口容器并添加到页面
    var $objWindow = $('<div class="window"></div>').appendTo('body');
    // 替换成你的目标HTML文件路径，加载内容到窗口
    $objWindow.load('your-target-page.html');
});

如果只需要目标HTML里的某一部分，还可以用选择器过滤：

// 只加载目标页面里class为specific-section的内容
$objWindow.load('your-target-page.html .specific-section');

2. 用$.get()手动获取（更灵活） #

如果需要加载前后做额外处理，比如添加加载动画、绑定事件，可以用$.get()：

$('.openbuttonapp').dblclick(function () {
    $.get('your-target-page.html', function(htmlContent) {
        // 创建窗口并插入获取到的HTML内容
        var $objWindow = $(htmlContent).addClass('window').appendTo('body');
        // 这里可以加加载完成后的操作，比如调整窗口样式、绑定关闭事件
    });
});

为什么你原来的代码不行？ #

document.documentElement.innerHTML获取的是当前页面的完整HTML结构（包含<html>、<head>、<body>标签），直接把整个页面结构塞进一个<div>里会破坏DOM层级，浏览器无法正确解析，所以无法正常运行。

内容的提问来源于stack exchange，提问作者Sophia