如何在 PnP 现代搜索 Web 部件 (SFx) 的弹出窗口中打开链接

通过 SPFx 中的自定义弹出链接增强用户体验

在现代 SharePoint 开发中，使用 PnP 现代搜索 WebPart (SPFx) 提供可配置的搜索结果可以显着改善用户体验。控制链接的打开方式是开发人员中的一项流行功能，尤其是“详细列表”布局。通常，链接会在新选项卡中打开，但如果我们想在弹出窗口中打开它们怎么办？

在这篇文章中，我们将了解如何通过更改 PnP 现代搜索 Web 部件的链接行为来实现此功能。我们将展示如何强制链接在自定义弹出窗口中打开，而不是在新选项卡中打开搜索结果，从而获得更加集成的用户体验。

当您使用像“`这样的公式（默认为新选项卡）时，就会出现挑战。但是，通过使用 JavaScript，我们可以覆盖此行为并在受控弹出窗口中打开链接。这允许在同一浏览会话中更灵活地显示内容。

我们将引导您完成开发此功能所需的步骤，重点是使用 JavaScript 和 SPFx 来改进详细列表布局。请继续关注我们逐步介绍该解决方案，以确保您的 SharePoint 网站无缝且用户友好。

了解 SPFx 中的弹出窗口解决方案

上面列出的脚本调整 PnP 现代搜索 Web 部件 (SPFx) 中链接的默认行为。默认情况下，链接使用 目标=“_空白” 标签以在新选项卡中打开。然而，这里的目的是在弹出窗口中打开这些链接，从而增加用户交互。为了实现这一点，我们使用了 窗口.open() 函数，它允许开发人员在新的浏览器窗口或弹出窗口中打开 URL。可以使用特定参数（例如宽度、高度和其他属性（例如滚动条或可调整大小））调整此函数，以确保弹出窗口按预期执行。

覆盖锚标记的默认点击行为是该方法的重要组成部分。这是用完成的 event.preventDefault()，这会阻止链接在新选项卡中打开。相反，我们将一个事件侦听器附加到链接，该事件侦听器会激活自定义函数（在本例中， openInPopup()）处理点击事件并在弹出窗口中打开 URL。这使开发人员可以更好地控制链接的行为，并在 PnP 现代搜索 Web 部件中获得更一致的用户体验。

除了处理前端行为之外，我们还使用 SPFx 的内置装饰器检查了后端方法，例如 @覆盖。这种方法使开发人员能够直接将 JavaScript 插入到自定义 WebPart 中，从而进一步修改搜索结果的行为。覆盖 SPFx 中的渲染过程允许我们注入 JavaScript 代码来处理链接点击并在弹出窗口中打开必要的材料。此技术使解决方案更加模块化，并且可在 SharePoint 环境的多个区域中重复使用，从而改善维护。

单元测试对于确保弹出功能在多个环境和浏览器中正常工作至关重要。使用 间谍（） 在 Jasmine 测试框架中验证了 窗口.open() 方法使用正确的参数执行。这种形式的测试可以在开发过程的早期识别潜在问题，并保证弹出窗口按计划运行。该解决方案通过集成前端事件处理、后端自定义和单元测试，增强了 SharePoint 的 PnP 现代搜索 WebPart 中的用户交互。

<script>
function openInPopup(url) {
   // Define popup window features
   const features = 'width=800,height=600,resizable=yes,scrollbars=yes';
   // Open URL in popup
   window.open(url, '_blank', features);
}
// Override link behavior
document.querySelectorAll('a[data-popup="true"]').forEach(function (link) {
   link.addEventListener('click', function (event) {
      event.preventDefault(); // Prevent default link behavior
      openInPopup(this.href); // Open in popup
   });
});
</script>
// HTML for the link:
<a href="{{slot item @root.slots.PreviewUrl}}" data-popup="true" style="color: {{@root.theme.semanticColors.link}}">
   {{slot item @root.slots.Destination}}
</a>

<a href="{{slot item @root.slots.PreviewUrl}}"
   onclick="event.preventDefault(); window.open(this.href, '_blank', 'width=800,height=600');"
   style="color: {{@root.theme.semanticColors.link}}">
   {{slot item @root.slots.Destination}}
</a>
// The window.open parameters define the size and behavior of the popup.

import { override } from '@microsoft/decorators';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
export default class PopupWebPart extends BaseClientSideWebPart {
   @override
   public render(): void {
      this.domElement.innerHTML = `
         <a href="{{slot item @root.slots.PreviewUrl}}" onclick="openPopup(this.href)">
            {{slot item @root.slots.Destination}}
         </a>
      `;
   }
}
function openPopup(url: string): void {
   window.open(url, '_blank', 'width=800,height=600,resizable=yes');
}

describe('Popup Functionality', function() {
   it('should open the link in a popup window', function() {
      spyOn(window, 'open');
      const testUrl = 'http://example.com';
      openInPopup(testUrl);
      expect(window.open).toHaveBeenCalledWith(testUrl, '_blank', jasmine.any(String));
   });
});

探索 SPFx 中的事件处理和动态 JavaScript 注入

使用 PnP 现代搜索 Web 部件 (SPFx) 时，对开发人员来说一项有用的功能是能够动态调整链接等元素的行为方式。 JavaScript 事件处理的使用为个性化用户交互提供了大量选项。使用事件侦听器来捕获和控制链接点击可创建更具交互性的体验。通过捕获点击事件，我们可以覆盖正常行为并在受控弹出窗口中打开 URL。这确保了平滑过渡，而不会干扰用户当前的选项卡或窗口。

在 SPFx WebParts 中自定义链接还需要动态插入 JavaScript 代码。 SharePoint 框架 (SPFx) 提供了类似的方法 @覆盖 和 使成为（） 为了实现这一点。通过插入自定义 JavaScript，开发人员可以更改搜索结果项的行为，而无需对 WebPart 本身进行重大修改。这种灵活性使您可以轻松地对所有搜索结果链接进行全局调整，从而确保所需的行为（例如在弹出窗口中打开）在整个平台上保持一致。

最后，性能和用户体验是任何基于 Web 的系统的关键因素，在这里也是如此。通过优化 JavaScript 的使用并限制资源密集型活动，我们可以确保这些自定义不会对页面加载时间或响应能力产生重大影响。高效的 JavaScript 使用与后端 SPFx 修改相结合，可在不牺牲性能的情况下提供高度灵活性，从而在整个 SharePoint 平台上提供无缝的用户体验。