Nuxt3网站无需iframe嵌入Resdiary预订组件失败求助

问题描述 #

我尝试在Vue项目（通过useHead加载脚本）和纯HTML页面中嵌入Resdiary预订组件，使用的目标嵌入代码如下：

<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
<input id="rdwidgeturl" name="rdwidgeturl" value="https://booking.resdiary.com/widget/Standard/LOCATION/IDNUMBER?includeJquery=false" type="hidden">
<script type="text/javascript" src="https://booking.resdiary.com/bundles/WidgetV2Loader.js"></script>

Vue项目中的实现方式：
在app.vue通过useHead加载脚本：

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://booking.resdiary.com/bundles/WidgetV2Loader.js',
      tagPosition: 'bodyClose'
    }
  ]
})
</script>

目标页面模板中添加DOM元素：

<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
<input id="rdwidgeturl" name="rdwidgeturl" value="https://booking.resdiary.com/widget/Standard/LOCATION/IDNUMBER?includeJquery=false" type="hidden">

但组件始终无法正常加载，仅显示异常内容，纯HTML页面测试也得到相同结果，期望组件能像标准示例那样完整加载。

解决方案 #

1. 替换占位符为实际商家信息 #

rdwidgeturl中的LOCATION和IDNUMBER是占位符，必须替换为你的商家实际对应的路径段和编号（比如示例中的FraDiavoloMilanoSempione和37876）。错误的占位符会导致脚本无法获取正确的商家配置，这是最常见的失败原因。

2. 调整Vue中脚本的加载时机 #

在Vue路由组件中，useHead将脚本放在bodyClose位置时，可能出现脚本加载完成但组件DOM尚未挂载的情况，导致脚本初始化时找不到目标元素。可以改为在组件的onMounted钩子中动态加载脚本：

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://booking.resdiary.com/bundles/WidgetV2Loader.js'
  script.type = 'text/javascript'
  document.body.appendChild(script)
})
</script>

这样能保证脚本在组件DOM挂载完成后再加载，确保初始化时能找到rd-widget-frame和rdwidgeturl元素。

3. 验证jQuery依赖配置 #

如果你的页面中没有预先引入jQuery，建议去掉includeJquery=false参数，让脚本自动加载所需的jQuery依赖。部分Resdiary组件依赖jQuery，强制关闭该参数可能导致功能异常。

4. 检查浏览器控制台错误信息 #

打开浏览器开发者工具（F12）的控制台标签，排查具体错误：

• 若出现404错误：确认rdwidgeturl和脚本地址是否正确；
• 若出现CORS错误：联系Resdiary确认你的域名是否在允许嵌入的白名单中；
• 若出现JS执行错误：根据错误信息定位依赖缺失或代码冲突问题。

5. 纯HTML页面的正确写法参考 #

确保DOM元素在脚本之前定义，避免脚本初始化时找不到目标元素：

<!DOCTYPE html>
<html>
<body>
  <div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
  <input id="rdwidgeturl" name="rdwidgeturl" value="https://booking.resdiary.com/widget/Standard/你的LOCATION/你的IDNUMBER" type="hidden">
  <script type="text/javascript" src="https://booking.resdiary.com/bundles/WidgetV2Loader.js"></script>
</body>
</html>

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