JavaScript使用href脚本动态加载页面遇X-Frame-Options错误的解决方法

错误原因 #

这个错误的核心是目标URL（Google Apps Script的Web应用）设置了X-Frame-Options: sameorigin响应头。这个安全头会告诉浏览器：该页面只能在与它同源的框架（iframe）中加载，而你的页面域名和Google的script.google.com域名属于跨域关系，所以浏览器出于安全限制，直接阻止了iframe的加载。

你之前用HTML直接实现时，应该是通过页面跳转（比如a标签直接导航）而非嵌入方式，所以没触发这个限制；改成按钮触发后如果用了iframe嵌入，就会触发这个安全策略。

解决方案 #

根据你的需求，分两种场景给出具体解决办法：

1. 不需要嵌入，直接在新标签页打开（最简单可靠）

如果只是需要点击按钮打开目标页面，完全没必要用iframe，直接用跳转方式即可，不会触发跨域嵌入限制。这里提供两种更稳妥的实现方式：

<!-- 方法1：按钮触发window.open -->
<button onclick="openDeliveryPage()">打开交付页面</button>

<script>
function openDeliveryPage() {
  // "_blank"参数指定在新标签页打开
  window.open('https://script.google.com/macros/s/AKfycbwLXIef95aeUGyRFiP3lH_-Oac6ByXem17VjnPjdXpN/dev?p=indEntregas', '_blank');
}
</script>

<!-- 方法2：用a标签模拟按钮（更不容易被浏览器弹窗拦截） -->
<a href="https://script.google.com/macros/s/AKfycbwLXIef95aeUGyRFiP3lH_-Oac6ByXem17VjnPjdXpN/dev?p=indEntregas" 
   target="_blank" 
   style="display: inline-block; padding: 8px 16px; background-color: #2196F3; color: white; text-decoration: none; border-radius: 4px; cursor: pointer;">
  打开交付页面
</a>

2. 必须在当前页面嵌入内容（需修改Google Apps Script）

如果一定要把目标页面嵌入到你的页面中（比如用iframe），需要修改Google Apps Script的代码，主动允许跨域嵌入：

在你的Google Apps Script的doGet函数中，添加setXFrameOptionsMode配置：

function doGet(e) {
  // 你的现有代码，比如创建HTML输出
  const htmlOutput = HtmlService.createHtmlOutput('<h1>交付页面内容</h1>');
  
  // 关键设置：允许所有域名嵌入该页面
  htmlOutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  
  return htmlOutput;
}

修改完成后，重新部署你的Google Apps Script Web应用，并且确保部署时的访问权限设置为"Anyone, even anonymous"（或者至少允许你的页面域名访问）。这样你的页面就能用iframe正常加载这个链接了。

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