跨域对象访问权限错误：Permission denied to access property 'document' 求助

兄弟，我太懂你碰到这个SecurityError: Permission denied to access property "document" on cross-origin object的崩溃了！咱们先把问题掰明白，再给你几个实打实的解决方案。

为啥会出这个错？ #

这是浏览器的同源策略在搞事情——当你的HTML页面和iframe里的PDF资源不在同一个域名、协议或者端口下时，浏览器会死死拦住你跨域访问iframe的内部DOM。你加的那个<META HTTP-EQUIV="Access-Control-Allow-Origin">根本没用，因为CORS是靠服务器返回的HTTP响应头生效的，不是HTML元标签能搞定的，而且PDF文件本身也不会返回这类响应头。

至于你试的Firefox about:config改设置，那只是临时调试用的，总不能让每个用户都去改浏览器配置吧？YQL现在基本凉了，也帮不上忙。

靠谱的解决方案来了 #

根据你要隐藏PDF里.canvasWrapper元素的需求，给你三个可行的方向：

1. 把PDF扔到和页面同域名下（最简单） #

如果你的页面部署在https://www.abcd.xyz，那把2739.pdf也传到同一个域名的服务器上，这样iframe和父页面就同源了，你原来的代码直接就能用，不用改啥。

2. 用PDF.js自己渲染PDF（最推荐） #

浏览器自带的PDF阅读器是沙箱隔离的，你根本碰不到它的DOM。换成Mozilla的PDF.js库来渲染PDF，你就能完全掌控渲染后的页面元素：

步骤很简单：

• 把PDF.js的核心文件和worker文件下载下来，放到本地和HTML同目录（避免跨域）
• 不用iframe，用一个div当容器，让PDF.js在里面渲染PDF
• 渲染完直接找元素改样式就行

给你写了个示例代码，你照着改：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background: #282c34; color: #43a199; }
        #pdf-container { height: 95vh; width: 100%; }
    </style>
</head>
<body>
    <div id="pdf-container"></div>
    <button onclick="hideCanvasWrapper();">Click Mee...</button>
    <!-- 引入PDF.js的文件，记得改成你本地的路径 -->
    <script src="pdf.js"></script>
    <script src="pdf.worker.js"></script>
    <script>
        // 页面加载时自动渲染PDF
        async function renderPDF() {
            const pdfUrl = '2739.pdf';
            const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
            // 先渲染第一页，要多页的话自己循环就行
            const page = await pdf.getPage(1);
            const viewport = page.getViewport({ scale: 1 });
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            document.getElementById('pdf-container').appendChild(canvas);
            await page.render({ canvasContext: context, viewport: viewport }).promise;
        }

        function hideCanvasWrapper() {
            // 注意：PDF.js渲染后的结构和浏览器内置阅读器不一样，这里找canvas的父元素
            const canvasWrapper = document.querySelector('#pdf-container canvas').parentElement;
            if (canvasWrapper) {
                canvasWrapper.style.display = 'none';
                alert('Canvas wrapper隐藏成功！');
            }
        }

        window.onload = renderPDF;
    </script>
</body>
</html>

3. 服务器端把PDF转成HTML（适合复杂需求） #

如果你需要对PDF内容做更多自定义，可以在服务器上用工具把PDF转成HTML，然后直接在页面里嵌入转换后的HTML——这样完全没跨域问题，想改啥DOM都随便你。常用的工具比如pdf2htmlEX，部署在服务器上自动处理就行。

最后再划个重点 #

• 别用HTML元标签搞CORS，没用，CORS是服务器响应头的事儿
• 浏览器自带的PDF阅读器iframe是沙箱隔离的，跨域根本碰不到内部DOM
• 优先选同域放PDF或者PDF.js渲染这俩方案，靠谱又实用

内容的提问来源于stack exchange，提问作者qɐʇǝɥɐW