訪問iFrame中的元素（ie9，Chrome，Firefox）

我在看似簡單的任務時遇到了一些麻煩。訪問iFrame中的元素（ie9，Chrome，Firefox）

我想將當前url加載到iFrame中。
我需要訪問多個div並將其刪除。
我需要打印修改後的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);

謝謝！ Ron

來源

2012-10-19 RSH

它應該是在iframe中加載頁面的責任，以便通過CSS打印自己的樣式。 – jbabey

你爲什麼要用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");

來源

2012-10-19 16:44:25 epascarello

這是一個很長的解釋，爲什麼我不能使用樣式表方法，但幫助我瞭解如何在iFrame加載函數中引用相同的調用： – RSH

您是否看不到最後一行？這就是你如何訪問iframe的內容。 – epascarello

display：none不會隱藏div，但會在ie9中打印時留下的空白空間爲220px。 – RSH

訪問iFrame中的元素（ie9，Chrome，Firefox）

回答

相關問題