如何在InDesign中添加含脚本的HTML代码？嵌入Google相册幻灯片求助

听起来你在InDesign Publish Online里嵌入Google相册的时候遇到了第三方工具代码失效的问题，我帮你梳理下可能的原因和替代方案：

一、为什么PublicAlbum的嵌入代码无法运行？ #

InDesign Publish Online对外部脚本的加载有一定限制，你的这段代码里可能有几个关键点导致失效：

• 脚本的async属性可能导致脚本在页面元素加载完成前就执行，无法找到目标DOM元素
• 包裹相册的div设置了display:none，可能阻止了脚本初始化相册组件
• 第三方工具的脚本可能没有适配InDesign Publish Online的运行环境

二、尝试修复PublicAlbum代码 #

你可以先调整代码的几个参数，看看是否能正常加载：

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js"></script>
</head>
<body>
<div class="pa-gallery-player-widget" style="width:100%; height:480px;" 
     data-link="https://photos.google.com/share/AF1QipM8qglM9SYDwhbTlTsBwzMFNnUy3ae_MhZ6G0MrT2R3M208j2EeB6EOiSj7Q6BUgg?key=aGZmTThnOHZIS0NzSlZaaWwtZEtJZkRnUjlXVjBn" 
     data-title="Bondy" 
     data-description="8 new photos added to shared album" 
     data-background-color="#ffffff">
  <object data="https://lh3.googleusercontent.com/lpIrmwAAeI-p6U3aI4dsEfGTBAGIFueRj5B-s-5MiDT85gHXGYYgEh-JDDs2Ctdor2wj-JHJYmTbhBT9sqDlcfOwOseTPFrVsZWqdWqMss7ddUhAzFfeytr0M12MUX9GPGK9bekgiA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/6kQS6AXg7Lu0u1GgfcZU7WwAhVcjkctwjChyJ4QgpVRp9pssLWMGcOoXfu7iaEr32P6GhS1ePayrHJeJEPcZTKCf_FeQMkx5j2bcBL-rT79fR1HOff8RmuV1vF-e-3mkdWyDu8mnpQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/OVm-Eja_ulFg2RW-JjDmhmOZH7qx343wTfqP4WAHyLSvgJsGhtSBW1Og8VG7pFa-WPDqvW1xKKb4PHK_WoPpXq9MhNTtzT2ITH7oe0mkRMO3C6zHjRbedZNY2w8VpAZUVeuEG47qqA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/HO9K0UCj1VUhDe9bJEomkVt6So2rKnwT_V6Il9Nx734bONRRi1QU34aCxPM-SJPXi3Lfp_K5zQcu5CcHFws4bwq6yQKvROEO7KISdewHfYBvud-GY22tm4kC3yGmxbC21l0nIr4O_g=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/nayFhxGXP6pCAstQlKYGbd662JjpBoeA15xyF5rVoXhefkeuYeAQrB-Pq0AkPBbiFOgdeGcbCOSdeV2RCe-tQrA5ufJ1muw5oHUr01CtCRNx-9B5tI_h1lzUkC0z3tWOrfMQvp4SqA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/dmQ4e_p0Z5kDRNw5R2RuH1XMQDPuEaUThXGp3rPiroV6nYwhIktZe5Zlc1olbZywP0YLJBDZJSoyL76zNTbGJIvpXyUE4GFhanvAP_MCrL_ZLv9ayNX47yYba4iPlK_glqkui_KGVw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/LVHXYLdL3kcDIT8TBIC7jfwsKCZKVYpdAaa49PhTG8wgziuC36N1OoFaQEC_R4GHZp-YJ-VO8fLU5P6zarsatwbikOVrqlqxDMKh6y-_2-rlIzGpb6bxbm4LFUDS3pUJKPKG-TVVWw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/2Um38iEfoYKBoe6l4_YDiYNNsnnz_4sBm4FF-ogxveFxNJOkMIA-7kcHk8c5WA3-9yUc3670lh_v2ZoFBkh84r4_nitdyg9kJ3tuUUJ1hdFk8D5cvLBBdHcX2jIa-ia_rAjLr-Y3ug=w1920-h1080"></object>
</div>
</body>
</html>

修改点说明：

• 移除了脚本的async属性，确保脚本在DOM加载完成后执行
• 删掉了display:none，让容器默认可见

三、更可靠的官方嵌入方案（优先推荐） #

如果上面的修复无效，建议使用Google相册官方提供的嵌入代码，兼容性更好：

1. 打开你的Google共享相册，点击右上角的「分享」→「获取链接」，确认权限设置为「知道链接的人可查看」
2. 点击相册右上角的「更多选项」（三个点图标）→「嵌入相册」
3. 调整相册的尺寸参数，复制官方生成的iframe代码
4. 将代码直接导入到InDesign的HTML对象中

示例代码格式：

<iframe src="你的官方嵌入链接" width="100%" height="480" frameborder="0" allowfullscreen></iframe>

四、嵌入Google Drive幻灯片的方法 #

如果需要嵌入Google Drive中的Google Slides幻灯片，步骤如下：

1. 打开目标Slides文件，点击「文件」→「发布到网页」
2. 在弹出的窗口中选择「嵌入」选项，设置合适的尺寸和自动播放参数
3. 复制生成的iframe代码，嵌入到InDesign中

示例代码格式：

<iframe src="你的Slides嵌入链接" width="100%" height="480" frameborder="0" allowfullscreen></iframe>

五、InDesign Publish Online嵌入HTML的注意事项 #

• 确保所有外部资源（图片、脚本）都设置为公开可访问，避免权限限制导致加载失败
• 优先选择iframe形式的嵌入代码，比第三方脚本的兼容性更好
• 嵌入前先在本地浏览器测试代码，确认能正常运行后再导入InDesign

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