如何使用外部图像 url 打印 iframe 内容答案

【问题标题】：How to print iframe content using external image url如何使用外部图像 url 打印 iframe 内容
【发布时间】：2018-10-21 13:36:35
【问题描述】：

我正在尝试直接从 iframe 的 src 的 url 打印

<iframe id="pagetwo" src="https://78.media.tumblr.com/b90ee054017d4ddd25a4c4161127c7d4/tumblr_p8iyzdMhuZ1qzooxpo1_1280.jpg" width="550" height="700"></iframe>

<a id="downloadlink2" class="link_print" href="" target="_blank"  onclick="printDocument('pagetwo')">
  <img src="assets/print-button.png" alt="">
</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”的框架访问跨域框架。

但是，当我将图像放入本地时，它可以完美运行

【问题讨论】：

可能重复：stackoverflow.com/questions/25098021/…

标签： javascript jquery html iframe

【解决方案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

【讨论】：