HTML加载Widget时通过浏览器传递参数失败问题排查

托管的Widget通过硬编码参数调用脚本时可正常加载，但通过浏览器URL参数传递参数时，Widget内的表单无法显示（仅能打印参数）。以下是相关代码及Widget核心逻辑：

可行的硬编码参数代码 #

<div id="idealy_widget"></div>
<link href="https://xxxxxxxx/jscript/index.css" rel="stylesheet"/>
<script id="widget-params" src="https://xxxxxxxxx/jscript/index.js" 
  clientId="xxxxxxxxxxxxxxxxxxxxx" 
  clientSecret="xxxxxxxxxx" 
  username="xxxxxxxxxxxxx"
  product_id="xxxxxxxxxx" type="module">
</script>

无效的动态传参代码 #

<div id="idealy_widget"></div>
<script type="module">
  const clientId = new URLSearchParams(window.location.search).get('clientId');
  const clientSecret = new URLSearchParams(window.location.search).get('clientSecret');
  const username = new URLSearchParams(window.location.search).get('username');
  const product_id = new URLSearchParams(window.location.search).get('product_id');
  
  console.log('Params:', clientId, clientSecret, username, product_id);

  const widgetScript = document.createElement('script');
  widgetScript.src = `https://xxxxxxxxxxxxx/jscript/index.js?clientId=${clientId}&clientSecret=${clientSecret}&username=${username}&product_id=${product_id}`;
  widgetScript.type = 'module';
  widgetScript.id = 'widget-params';

  widgetScript.onload = () => {
    console.log('Script loaded successfully');
    // You may not need to manually call initWidget since it's called internally in index.js
  };

  document.head.appendChild(widgetScript);
</script>

Widget核心逻辑代码 #

app.js #

<LocalizedModal clientId={clientId} clientSecret={clientSecret} username={username} product_id={product_id} />

index.js #

document.addEventListener('DOMContentLoaded', () => {
  // Get the parameters from the HTML script tag
  const scriptElement = document.getElementById('widget-params');
  const clientId = scriptElement.getAttribute('clientId');
  const clientSecret = scriptElement.getAttribute('clientSecret');
  const username = scriptElement.getAttribute('username');
  const product_id = scriptElement.getAttribute('product_id');
  // const ideaIds = scriptElement.getAttribute('ideaIds');

  // Render the React component with the parameters.
  const root = ReactDOM.createRoot(document.getElementById('idealy_widget'));
  root.render(
    <App
      clientId={clientId}
      clientSecret={clientSecret}
      username={username}
      product_id={product_id}
      // ideaIds={ideaIds}
    />
);

原因分析 #

核心问题在于参数读取逻辑不匹配：

• 硬编码方式下，参数是作为script标签的自定义属性传递，index.js通过getAttribute从标签属性中读取参数，能正常获取值。
• 动态传参方式下，参数被拼到了script的URL查询字符串里，但index.js仍然尝试从script标签的属性中读取参数，自然拿不到任何值。参数为空会导致Widget组件无法正常初始化，最终表现为表单不显示。

解决方案 #

方案一：保持参数读取逻辑不变，动态设置script标签属性 #

修改动态传参的代码，将URL参数设置为script标签的自定义属性，和硬编码方式保持一致：

const widgetScript = document.createElement('script');
widgetScript.src = 'https://xxxxxxxxxxxxx/jscript/index.js';
widgetScript.type = 'module';
widgetScript.id = 'widget-params';

// 将URL参数设置为script标签的属性
widgetScript.setAttribute('clientId', clientId);
widgetScript.setAttribute('clientSecret', clientSecret);
widgetScript.setAttribute('username', username);
widgetScript.setAttribute('product_id', product_id);

widgetScript.onload = () => {
  console.log('Script loaded successfully');
};

document.head.appendChild(widgetScript);

方案二：修改index.js，兼容URL查询字符串传参 #

如果需要保留URL传参的方式，修改index.js的参数读取逻辑，同时支持从script标签属性和URL查询字符串获取参数：

document.addEventListener('DOMContentLoaded', () => {
  const scriptElement = document.getElementById('widget-params');
  
  // 优先从script标签属性读取参数
  let clientId = scriptElement.getAttribute('clientId');
  let clientSecret = scriptElement.getAttribute('clientSecret');
  let username = scriptElement.getAttribute('username');
  let product_id = scriptElement.getAttribute('product_id');

  // 如果属性中没有参数，从URL查询字符串读取
  if (!clientId || !clientSecret || !username || !product_id) {
    const urlParams = new URLSearchParams(scriptElement.src.split('?')[1] || '');
    clientId = clientId || urlParams.get('clientId');
    clientSecret = clientSecret || urlParams.get('clientSecret');
    username = username || urlParams.get('username');
    product_id = product_id || urlParams.get('product_id');
  }

  // 渲染组件
  const root = ReactDOM.createRoot(document.getElementById('idealy_widget'));
  root.render(
    <App
      clientId={clientId}
      clientSecret={clientSecret}
      username={username}
      product_id={product_id}
    />
  );
});

注意事项 #

• 使用方案一时，要确保从URL中获取的参数不为空，否则设置到script属性中会传递空值，仍然导致组件异常。
• 使用方案二时，需要你有权限修改Widget的index.js代码，如果Widget是第三方托管的，只能选择方案一。

内容的提问来源于stack exchange，提问作者Ahmed Nizami