javascript - 访问 iFrame 中的元素（ie9、Chrome、Firefox）

Question

我在这个看似简单的任务上遇到了一些麻烦。

1. 我想将当前 url 加载到 iFrame 中。
2. 我需要访问几个 div 并删除它们。
3. 我只需要打印修改后的 iFrame。

这是我到目前为止所拥有的，但我无法访问加载的 iFrame 中的任何 html 元素。iFrame 的内容确实按预期打印，但我需要删除几个 div，我正试图这样做：

var newWidth = "1024px";
var url = window.location;
var $iFrame = $('<iframe id="printFrame" style="width:' + newWidth + ' !important;     height:100 !important; border: 1px solid #000000;" name="printFrame"></iframe>');

$('#content-area').append($iFrame);

$iFrame
  .load(function () {

   // NEED TO DO THIS IN THE IFRAME DOCUMENT: 
   // $('#content-area').remove();
   // CANT FIGURE OUT HOW


   this.contentWindow.print(); // this prints fine
   $(this).unbind('load');
   })
   .attr('src', url);

谢谢！罗恩

Answer 1

你为什么用 JavaScript 来做这件事？使用打印样式表隐藏您不想打印的元素。

添加新样式表

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

添加要应用的规则print.css

div.noPrint { display : none; }

如果您仍想使用 iframe 执行此操作，则需要使用contents()来访问元素。

var iframeDivs = $iFrame.contents().find("div");