访问iFrame中的元素（ie9，Chrome，Firefox）

Question

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

1. 我想将当前网址加载到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");