如何使用外部图像 url 打印 iframe 内容
Posted
技术标签:
【中文标题】如何使用外部图像 url 打印 iframe 内容【英文标题】：How to print iframe content using external image url 【发布时间】：2018-10-21 13:36:35 【问题描述】：我正在尝试直接从 iframe 的 src 的 url 打印
<iframe id="pagetwo" src="https://78.media.tumblr.com/b90ee054017d4ddd25a4c4161127c7d4/tumblr_p8iyzdMhuZ1qzooxpo1_1280.jpg" ></iframe>
<a id="downloadlink2" class="link_print" href="" target="_blank" onclick="printDocument('pagetwo')">
<img src="assets/print-button.png" >
</a>
打印此脚本时：
function printDocument(iframe)
console.log(window.frames);
var iframe = document.getElementById(iframe);
if (iframe.src)
var frm = iframe.contentWindow;
frm.focus();// focus on contentWindow is needed on some versions
frm.print();
我收到此错误：
未捕获的 DOMException：阻止具有源“http://localhost:8080”的框架访问跨域框架。
但是，当我将图像放入本地时，它可以完美运行
【问题讨论】：
可能重复：***.com/questions/25098021/… 【参考方案1】：主要问题确实与SecurityError: Blocked a frame with origin from accessing a cross-origin frame 中描述的问题相同，但您有一个特殊的用例可能需要自己的答案。
由于您所做的只是加载此跨域框架以打印它指向的图像，因此您可以自己创建将以同源方式显示此图像的文档，并在此调用 print同源框架：
在正常情况下，您可以创建一个此类文档的 Blob 并将其显示在您的框架中：
var frame = document.createElement('iframe');
var external_doc = new Blob(['<html><body><img src="https://78.media.tumblr.com/b90ee054017d4ddd25a4c4161127c7d4/tumblr_p8iyzdMhuZ1qzooxpo1_1280.jpg"></body></html>'],
type: 'text/html'
);
frame.onload = function()
try
this.contentWindow && this.contentWindow.print();
return;
catch (e)
console.error('in a protective iframe?');
;
frame.src = URL.createObjectURL(external_doc);
document.body.appendChild(frame);
但是由于 StackSnippet 本身是在过度保护的 iframe 中运行的，所以这在此处不起作用，但在 jsfiddle 中会起作用。
Ps：如果您需要支持不支持 Blob API 的旧版浏览器，您也可以在 about:blank iframe 中附加一个 <img>：jsfiddle
【讨论】：
以上是关于如何使用外部图像 url 打印 iframe 内容的主要内容，如果未能解决你的问题，请参考以下文章
如何从外部窗口检测用户在 iframe 中导航到的 URL？