如何在Contentful自定义应用中读取URL查询或路径参数？

AI 小北

2026-6-14

在Contentful自定义应用中获取页面路径/查询参数的解决方案

直接通过window.parent.location访问主页面URL会触发跨域错误，这是Contentful的安全策略限制导致的。要安全获取主页面的路径或查询参数，必须使用Contentful App SDK提供的官方API，以下是具体实现步骤：

1. 安装并初始化App SDK

首先确保你的项目中安装了Contentful App SDK：

npm install @contentful/app-sdk
# 或
yarn add @contentful/app-sdk

在应用入口处初始化SDK，获取可用的SDK实例：

import { init } from '@contentful/app-sdk';

init().then((sdk) => {
  // 后续所有与主页面交互的操作基于该sdk实例完成
});

2. 获取查询参数

通过SDK的location.search属性获取完整的查询参数字符串，再用URLSearchParams解析提取目标参数：

init().then((sdk) => {
  // 获取查询参数字符串（格式类似 "?or=customQueryParams"）
  const searchString = sdk.location.search;
  const params = new URLSearchParams(searchString);
  
  // 获取指定查询参数的值
  const customParam = params.get('or');
  console.log('自定义查询参数值:', customParam); // 输出 "customQueryParams"
});

3. 获取自定义路径部分

通过location.pathname属性获取主页面的完整路径，拆分后提取自定义的路径段：

init().then((sdk) => {
  // 获取完整路径（格式类似 "/spaces/{spaceId}/environments/{env}/apps/app_installations/{appId}/{appName}/custom/params"）
  const fullPath = sdk.location.pathname;
  // 拆分路径并过滤空字符串
  const pathSegments = fullPath.split('/').filter(seg => seg);
  
  // 提取自定义路径段（示例中取最后两段）
  const customSegments = pathSegments.slice(-2);
  console.log('自定义路径段:', customSegments); // 输出 ["custom", "params"]
});