如何删除在 SharePoint 中加载嵌入项目之前出现的“嵌入预览”？

Question

我的 SharePoint 网站上有一个嵌入项目，加载时会出现一条消息，显示图像损坏，然后显示“嵌入预览”字样。它只显示几秒钟，然后就消失了，但我想知道是否有办法删除它？

Answer 1

如果您检查控制台，您将能够嵌入 Web 部件向该嵌入文件的 DriveItem 发出图形请求，以检索该文件的缩略图。缩略图用作嵌入式 Web 部件中的预览，也可用于预览列表库中的文件。

例如：

https://{{tenantName}}.sharepoint.com/sites/{{siteName}}/_api/v2.1/sites/{{siteId}}/items/{{itemId}}/driveItem/thumbnails/0/{{size}}/content?prefer=noRedirect

您可以在下面找到所有支持预览的文件：

支持在 OneDrive、SharePoint 和 Teams 中预览文件的文件类型

如您所见，.aspx 文件扩展名支持预览。然而;如果您上传 .aspx 文件而不使用 SharePoint 中的 OOTB 功能创建该文件，则该文件不会创建缩略图，并且会使此请求返回 404 - 未找到。然后，一旦您在嵌入 Web 部件中加载页面，它将在预览中返回为损坏的图像，因为缩略图不存在。

有一种解决方法可以在加载嵌入内容时立即删除缩略图，但是，您只能通过在呈现嵌入 Web 部件的页面中使用自定义 JavaScript 来实现此目的。要在页面中添加自定义 JavaScript，您需要拥有 现代脚本编辑器 Web 部件。

部署包后，将其设置为在您的站点中可用。

如果可用，请在您使用嵌入 Web 部件的页面中添加现代脚本编辑器 Web 部件，并使用以下 JavaScript 代码：

<script>
// Function to remove the img element
function removeImage() {
    var img = document.querySelector('img[alt="Embed Preview."]');
    if (img) {
        img.remove();
    }
}

// Setting up the MutationObserver
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // Check if the added node is the desired img element or contains the desired img element
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];
                if (node.nodeType === Node.ELEMENT_NODE) { // Check that this is an element node
                    if (node.tagName === 'IMG' && node.getAttribute('alt') === 'Embed Preview.') {
                        node.remove();
                    } else if (node.querySelector('img[alt="Embed Preview."]')) { // Check its descendants
                        removeImage();
                    }
                }
            }
        }
    });
});

var targetElement = document.querySelector("#spPageCanvasContent");
// Start observing the document with the configured parameters
observer.observe(targetElement, { childList: true, subtree: true });


</script>

此脚本将使用 MutationObserver 来观察元素 ID

spPageCanvasContent

何时发生更改。此元素基本上是 SharePoint 页面的内容。

现在，加载嵌入内容后，您将不会看到损坏的预览。我和你有同样的问题，它对我有用。

注意： 就我而言，我只有可以更改页面内容的嵌入 Web 部件。如果您有多个更改的组件，您可能需要限制

MutationObserver

的范围。要限制更改的范围，请更改以下行中

querySelector

的元素：

var targetElement = document.querySelector("#spPageCanvasContent");