剪辑到Onenote的快照与我在浏览器中看到的不完全相同

debugcn 发表于 Dev

JunjieLi

您好，我现在正在使用Onenote API发送当前网页的快照：

http://msdn.microsoft.com/zh-CN/library/office/dn575431(v=office.15).aspx

http://msdn.microsoft.com/zh-cn/library/office/dn575438(v=office.15).aspx#sectionSection4

发布多部分内容时，我将HTML内容放在“ MyAppHtmlId”部分中：

<img data-render-src="name:MyAppHtmlId" alt="a cool image" width="500"/>

HTML内容是通过以下方式获得的：

document.documentElement.outerHTML;

问题在于有时保存在Onenote中的快照与我在浏览器中看到的不完全相同。但是，当我转向使用Chrome扩展程序“ OneNote Clipper”来测试同一页面时，它会很好地工作。（示例页面：https : //stackoverflow.com/）

是我使用了错误的Javascript代码来获取HTML内容，还是我错过了有关Onenote API的其他东西？

Eleazar Vega-Gonzalez占位符图像

在将结果document.documentElement.outerHTML发送到服务之前，您需要几种方法来对其进行修改。

确保包括DOCTYPE。如果您不包括DOCTYPE数据，则屏幕截图将以怪癖模式呈现，这很容易导致屏幕截图不理想。这里有一篇文章解释了如何生成正确的DOCTYPE字符串：使用Javascript将HTML的DocType获取为字符串我将它们的代码合并到下面的示例中。
由于屏幕快照将仅使用DOM生成而无需了解原始URL，因此如果不存在基本标记，您将希望添加一个基本标记。这样可以确保正确理解用于资源的任何相对路径。
您可能需要删除所有noscript标记。由于将在不运行Javascript的情况下呈现有效负载，因此将呈现存在的任何noscript标记，这可能会导致不需要的内容显示在屏幕快照中。

这是一些示例代码，应在最小化当前页面DOM的更改的同时实现这些目标：

function getDom() {
    // Get the DOCTYPE
    var node = document.doctype;
    var doctype = "<!DOCTYPE "
        + node.name
        + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
        + (!node.publicId && node.systemId ? ' SYSTEM' : '')
        + (node.systemId ? ' "' + node.systemId + '"' : '')
        + '>';

    // Before we get the document's outerHTML, create a base tag if one doesn't exist
    if (!document.getElementsByTagName('base').length) {
        var baseUrl = document.location.href;
        baseUrl = baseUrl.substr(0, baseUrl.lastIndexOf('/') + 1);

        var base = document.createElement('base');
        base.href = baseUrl;
        // The base tag is the first child of head to ensure we don't misload links/scripts in the head
        document.head.insertBefore(base, document.head.firstChild);
    }

    // Store the outerHTML with DOCTYPE
    var html = doctype + document.documentElement.outerHTML;

    // Remove the text for any noscript elements from html
    var noscriptElements = document.getElementsByTagName('noscript');
    for (var i = 0; i < noscriptElements.length; i++) {
        html = html.replace(noscriptElements[i].outerHTML, '');
    }

    return html;
}