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

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

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

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

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

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

命令	使用示例
window.open()	此命令将打开一个新的浏览器窗口或选项卡。此方法打开一个具有特定尺寸和属性（例如宽度、高度和滚动条）的弹出窗口。
event.preventDefault()	防止单击链接的默认行为，即在同一选项卡或新选项卡中打开 URL。这允许我们自定义链接的行为方式，例如打开弹出窗口。
querySelectorAll()	data-popup 属性选择所有锚元素（）。该方法返回一个 NodeList，它允许我们同时将事件侦听器应用于多个组件。
forEach()	由 querySelectorAll() 生成的 NodeList 中的每个条目都会接收一个操作（例如，附加一个事件侦听器）。这适用于管理 PnP 现代搜索中的许多动态链接元素。
addEventListener()	此技术向触发 openInPopup() 函数的每个链接添加一个单击事件侦听器。有必要覆盖默认的点击行为。
import { override }	此装饰器是 SharePoint 框架 (SPFx) 的一部分，用于覆盖 SPFx WebParts 的默认行为。它支持特定的自定义，例如注入 JavaScript 以提供弹出功能。
@override	在 SPFx 中，装饰器指示方法或属性覆盖功能。当修改 SharePoint 组件的行为时，这是必要的。
spyOn()	使用 Jasmine 进行单元测试期间监视函数调用。在这种情况下，它与 window.open() 一起使用，以确保在测试期间正确启动弹出窗口。
expect()	该命令用于 Jasmine 中的单元测试。它检查是否使用正确的参数调用了 window.open()，以确保弹出窗口以所需的设置出现。

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

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

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

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

单元测试对于确保弹出功能在多个环境和浏览器中正常工作至关重要。使用 在 Jasmine 测试框架中验证了 方法使用正确的参数执行。这种形式的测试可以在开发过程的早期识别潜在问题，并保证弹出窗口按计划运行。该解决方案通过集成前端事件处理、后端自定义和单元测试，增强了 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 平台上提供无缝的用户体验。

1. 如何使用 JavaScript 在弹出窗口中打开链接？
2. 您可以使用 JavaScript 中的函数。此功能允许您打开具有特定属性（例如大小和滚动条）的新浏览器窗口或弹出窗口。
3. 什么是 做？
4. 这 方法阻止事件执行其默认操作。在这种情况下，它会阻止链接在新选项卡中打开，同时允许执行特定操作，例如显示弹出窗口。
5. 如何将自定义行为应用于 SPFx 中的众多链接？
6. 使用 在 JavaScript 中，您可以选择多个组件并向它们附加事件侦听器，以保证它们都遵循相同的行为。
7. 如何覆盖 SPFx WebParts 的默认呈现？
8. 要调整 SPFx WebPart 的行为，请使用 装饰师。这使您能够将自定义 JavaScript 直接注入到 WebPart 的呈现过程中。
9. 确定弹出窗口是否正确打开的最佳技术是什么？
10. 在像 Jasmine 这样的框架中使用单元测试，您可以使用 监控是否 使用预期参数适当地调用函数。

可以使用 PnP 现代搜索 Web 部件 (SPFx) 中的 JavaScript 自定义在弹出窗口中打开链接的方式。此更改通过让用户专注于当前选项卡同时提供对受控弹出窗口中的详细内容的访问来改善用户交互。

为了保持一致的行为，请使用类似的技术 并将 JavaScript 动态注入 SPFx WebParts。此外，单元测试有助于确保这些更改在许多上下文中都能正常工作，从而为 SharePoint 搜索结果自定义提供可靠、用户友好的解决方案。