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

时间:2014-09-18 05:03:04

标签: snapshot onenote

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

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

http://msdn.microsoft.com/en-us/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扩展程序&#34; OneNote Clipper&#34;为了测试同一页面,它运作良好。 (示例页面:https://stackoverflow.com/

我是否使用了错误的Javascript代码来获取HTML内容或我错过的关于Onenote API的其他内容?

1 个答案:

答案 0 :(得分:0)

在将document.documentElement.outerHTML发送到服务之前,有几种方法可以修改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; } 的结果。

  1. 确保包含DOCTYPE。如果您不包含DOCTYPE数据,屏幕截图将以怪癖模式呈现,这很容易导致不太理想的屏幕截图。有一篇帖子解释了如何在这里生成正确的DOCTYPE字符串:Get DocType of an HTML as string with Javascript我已将其代码合并到下面的示例中。

  2. 由于屏幕截图仅使用DOM生成,并且不知道原始网址,因此如果没有基本标记,则需要添加基本标记。这可确保正确理解用于资源的任何相对路径。

  3. 您可能希望删除任何noscript标记。由于您的有效负载将在不运行Javascript的情况下呈现,因此将呈现任何存在的noscript标记,这可能会导致屏幕截图中出现不需要的内容。

  4. 这里有一些示例代码应该处理这些目标,同时尽量减少当前页面DOM的更改:

    {{1}}