如何在Shopify嵌入式应用中获取店铺URL？

以下是几个可靠的替代方案，避免依赖location.ancestorOrigins：

1. 使用Shopify App Bridge（官方推荐） #

Shopify App Bridge专为iframe环境下与Shopify后台交互设计，兼容所有主流浏览器（包括Firefox）。

• React环境下，通过@shopify/app-bridge-react的useShop hook直接获取店铺信息：

  import { useShop } from '@shopify/app-bridge-react';
  
  function YourComponent() {
    const shop = useShop();
    const shopUrl = `https://${shop.shopDomain}`;
    // 直接使用shopUrl即可
  }
  

• 非React环境，初始化App Bridge后调用API获取：

  import createApp from '@shopify/app-bridge';
  
  const app = createApp({
    apiKey: '你的应用API密钥',
    shopOrigin: window.location.search.split('shop=')[1], // 从URL参数提取初始店铺域名
  });
  
  app.context().then((context) => {
    const shopUrl = `https://${context.shop}`;
    // 使用获取到的店铺URL
  });
  

2. 从后端传递店铺信息 #

Shopify在应用初始化时，会将shop参数传递给后端（如安装请求、iframe加载请求）。你可以在后端处理逻辑中提取该参数，拼接成完整店铺URL后传递给前端：

• Node.js后端示例：

  app.get('/app-page', (req, res) => {
    const shop = req.query.shop;
    const shopUrl = `https://${shop}`;
    // 通过模板变量或接口响应将shopUrl返回给前端
    res.render('app-page', { shopUrl });
  });
  

前端直接使用后端传递的shopUrl即可，完全不依赖浏览器跨域相关API，兼容性无死角。

3. 解析document.referrer（备选方案） #

如果上述方法不适用，可尝试解析document.referrer——Shopify iframe加载时，referrer通常为店铺后台页面URL，从中提取域名部分：

function getShopUrlFromReferrer() {
  const referrer = document.referrer;
  if (!referrer) return null;
  const url = new URL(referrer);
  // 匹配Shopify店铺域名格式
  if (url.hostname.endsWith('.myshopify.com')) {
    return `https://${url.hostname}`;
  }
  return null;
}

const shopUrl = getShopUrlFromReferrer();

注意：该方法依赖浏览器referrer策略，部分隐私模式下可能无法获取，仅作为备选方案。

内容的提问来源于stack exchange，提问作者M.Singer