无法访问同域的iframe

Question

我正在尝试在 iframe 中加载 pdf 并设置高度以匹配文档的高度。

var frame = document.getElementById("preview_frame");
frame.onload = function() {
  this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';
}
frame.src = frame.getAttribute("data-url") + "/files/preview/" + target;

文档正在加载，但我在控制台中看到此错误：

未捕获的 DOMException：访问跨源对象上的属性“文档”的权限被拒绝

带有 iframe 的页面和 pdf 文档都在同一域内本地托管：

页面网址：

https://locdev/project-url/public_html

pdf 网址:

https://locdev/project-url/public_html/files/preview/file.pdf

我什至尝试添加

Header set Access-Control-Allow-Origin "https://locdev"

至

/project-url/public_html/files/preview/.htaccess

当我直接打开 pdf 文档时，我看到它正在被添加，但我仍然在带有 iframe 的页面上收到错误。

我注意到，如果我用图像替换 pdf 文件，那么代码就可以工作。

如何解决这个问题？

Answer 1

问题是 PDF 不是网页内容。

要克服这个问题，您需要使用 JavaScript PDF 渲染器，例如 PDF.js。然后，您可以将其与 iframe-resizer 结合使用，使 iframe 调整为文档的大小。