在Qualtrics问卷中嵌入Reddit帖子失败问题排查

我尝试在Qualtrics问卷问题中嵌入Reddit帖子，但无法正常显示。预览问卷时帖子无法显示，但元素检查显示代码正常。直接在HTML中硬编码Reddit嵌入代码时能正常显示，且元素会转换为iframe而非blockquote格式，该代码在JSFiddle中可正常运行，推测问题是Qualtrics特有的。

使用的HTML代码 #

<p>Please take a look at the following Reddit post:</p>
<div id="embeddedPost">
    <blockquote id="redditBlockquote" class="reddit-embed-bq" style="height:316px" data-embed-height="316">
        <a id="redditLink" href=""></a>
    </blockquote>
    <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
</div>

自定义JavaScript代码 #

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    const redditUrls = ["https://www.reddit.com/r/copenhagen/comments/xfmjbi/secret_gems_of_cph/", "https://www.reddit.com/r/copenhagen/comments/tpn0tc/what_to_do_in_copenhagen_as_a_girl_in_her/", "https://www.reddit.com/r/copenhagen/comments/wnw6ad/in_copenhagen_for_1_day_what_are_some_mustsees/"];
    const randomIndex = Math.floor(Math.random() * redditUrls.length);
    const randomUrl = redditUrls[randomIndex];

    // Set the href attribute of the blockquote anchor tag
    const redditLink = document.getElementById('redditLink');
    redditLink.href = randomUrl;

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

问题原因及解决办法 #

核心原因 #

1. 脚本加载时机不匹配：Reddit的widgets.js在页面初始加载时就已执行，而你的动态设置链接逻辑在addOnReady阶段才运行，此时脚本已经完成解析，不会重新识别修改后的blockquote标签。硬编码场景下链接预先存在，脚本执行时能直接转换为iframe，动态设置则错过了触发时机。
2. Qualtrics DOM管控限制：Qualtrics对问卷页面的DOM有特殊处理机制，addOnReady阶段页面元素可能仍处于平台管控中，动态修改的属性无法被外部脚本捕获；另外平台的安全策略可能延迟了外部脚本执行，导致脚本运行时链接还未设置完成。

解决方法1：动态重新触发Reddit嵌入脚本 #

修改JS代码，在设置链接后重新加载并初始化Reddit脚本，确保脚本能识别到已更新的链接：

Qualtrics.SurveyEngine.addOnReady(function() {
    const redditUrls = ["https://www.reddit.com/r/copenhagen/comments/xfmjbi/secret_gems_of_cph/", "https://www.reddit.com/r/copenhagen/comments/tpn0tc/what_to_do_in_copenhagen_as_a_girl_in_her/", "https://www.reddit.com/r/copenhagen/comments/wnw6ad/in_copenhagen_for_1_day_what_are_some_mustsees/"];
    const randomIndex = Math.floor(Math.random() * redditUrls.length);
    const randomUrl = redditUrls[randomIndex];

    // 移除已加载的旧脚本，避免重复执行问题
    const existingScript = document.querySelector('script[src="https://embed.reddit.com/widgets.js"]');
    if (existingScript) existingScript.remove();

    // 设置目标链接
    const redditLink = document.getElementById('redditLink');
    redditLink.href = randomUrl;

    // 重新加载Reddit嵌入脚本
    const script = document.createElement('script');
    script.src = "https://embed.reddit.com/widgets.js";
    script.charset = "UTF-8";
    script.async = true;
    document.getElementById('embeddedPost').appendChild(script);
});

解决方法2：动态生成完整嵌入结构 #

直接在JS中生成包含正确链接的blockquote和脚本，避免预先加载脚本导致的时机问题：

Qualtrics.SurveyEngine.addOnReady(function() {
    const redditUrls = ["https://www.reddit.com/r/copenhagen/comments/xfmjbi/secret_gems_of_cph/", "https://www.reddit.com/r/copenhagen/comments/tpn0tc/what_to_do_in_copenhagen_as_a_girl_in_her/", "https://www.reddit.com/r/copenhagen/comments/wnw6ad/in_copenhagen_for_1_day_what_are_some_mustsees/"];
    const randomIndex = Math.floor(Math.random() * redditUrls.length);
    const randomUrl = redditUrls[randomIndex];

    const embedContainer = document.getElementById('embeddedPost');
    // 清空容器并插入完整的嵌入代码
    embedContainer.innerHTML = `
        <blockquote class="reddit-embed-bq" style="height:316px" data-embed-height="316">
            <a href="${randomUrl}"></a>
        </blockquote>
        <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
    `;
});

对应的HTML可简化为：

<p>Please take a look at the following Reddit post:</p>
<div id="embeddedPost"></div>

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