Svelte组件中如何将变量值传入div内的script标签？

方案一：动态创建DOM元素（推荐，安全可控） #

Svelte对组件内的内嵌script标签不会自动做变量插值，通过动态创建DOM元素的方式可以完美解决变量注入问题：

<script>
  import { onMount } from 'svelte';
  // 定义可外部传入的变量
  export let placementId = 'default_placement';
  export let slotId = 'default_slot';

  onMount(() => {
    // 确保freestar全局对象已加载
    if (typeof freestar === 'undefined') return;

    // 创建广告容器div
    const adContainer = document.createElement('div');
    adContainer.id = 'desktop_native';

    // 创建script标签并注入变量
    const adScript = document.createElement('script');
    adScript.type = 'text/javascript';
    adScript.dataset.cfasync = 'false';
    adScript.textContent = `
      freestar.config.enabled_slots.push({ 
        placementName: "${placementId}", 
        slotId: "${slotId}" 
      });
    `;

    // 将元素挂载到组件内的预留位置
    adContainer.appendChild(adScript);
    document.getElementById('ad-mount-point').appendChild(adContainer);
  });
</script>

<!-- 组件内预留广告挂载节点 -->
<div id="ad-mount-point"></div>

方案二：使用@html指令（注意XSS风险） #

如果变量来源完全可信（无用户输入等不可控内容），可以通过拼接HTML字符串并用@html渲染的方式实现：

<script>
  export let placementId = 'some_placement_id';
  export let slotId = 'some_slot_id';

  // 拼接带变量的HTML字符串，注意script标签闭合要转义
  $: adHtml = `
    <div id="desktop_native">
      <script data-cfasync="false" type="text/javascript">
        freestar.config.enabled_slots.push({ 
          placementName: "${placementId}", 
          slotId: "${slotId}" 
        });
      <\/script>
    </div>
  `;
</script>

<!-- 渲染动态HTML内容 -->
{@html adHtml}

关键注意事项 #

• 必须确保全局的freestar对象在组件挂载前已加载完成，否则会触发undefined错误，可在onMount中增加判断逻辑
• 若需要广告刷新功能，可将动态创建脚本的逻辑封装为独立函数，按需调用

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