设置 iFrame 源并使用 jQuery 重新加载答案

【问题标题】：Set iFrame source and reload with jQuery设置 iFrame 源并使用 jQuery 重新加载
【发布时间】：2015-11-28 14:34:17
【问题描述】：

我有一个独特的问题——虽然我见过类似的问题和答案——但没有一个能完全解决我的挑战。

目前，我提供了一个“打印”按钮，用于在基于嵌入和隐藏 iframe 的浏览器上加载打印对话框。这工作得很好，但我不想通过拉入 iframe 来减慢页面加载速度。

所以，我想加载一个没有源的 iframe，然后如果用户单击打印图标，则编写正确的源 url，然后重新加载 iframe，最后显示对话框。

不幸的是，在我重新加载 iframe 之前会弹出打印对话框，因此会在对话框中加载一个空白页。在随后的点击中，PDF 被加载并准备好打印。

<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<iframe id="iFramePdf" src="" style="display:none;"></iframe>

<script type="text/javascript">
  jQuery(document).ready(function() {
    $("#load_pdf").click(loadPDF);

    function loadPDF() {
      $('#iFramePdf').attr('src', "my.pdf");
      // Attempt to reload iframe
      $('#iFramePdf').load("my.pdf");
      sendPrint('iFramePdf')
    }

    function sendPrint(elementId) {
      var iframe = $(element_id)[0]; 
      iframe.contentWindow.focus(); 
      iframe.contentWindow.print();
    }

});
</script>

我尝试了以下各种方法来重新加载：

// Attempt 1
$('#iFramePdf').attr('src', function () { return     
$(this).contents().get(0).location.href });

// Attempt 2
$('#iFramePdf').attr("src", $('#iFramePdf').attr("src"));
$('#iFramePdf').attr('src', function () { return $(this).contents().get(0).location.href });

// Attempt 3
$('#iFramePdf')[0].contentWindow.location.reload(true);

// Attempt 4
var getMyFrame = document.getElementById(elementId);
getMyFrame.contentWindow.location.reload(true);

我什至尝试过使用 jQuery 的 defer 方法，但没有成功（可能是因为我缺乏知识）。如果我能得到任何指导，我将不胜感激。

【问题讨论】：

见stackoverflow.com/questions/23766086/…
iFrame 是一个相当残酷的解决方案。通常，可以利用CSS @media 规则在同一页面上轻松维护显示格式和打印格式。
我尝试了这些建议，但无济于事。我决定添加一个先加载 iframe 源的悬停方法，然后让 click 事件处理打印。虽然这不是我想要的答案，但它提供了一个可行的解决方案。

标签： javascript jquery iframe reload jquery-deferred

【解决方案1】：

尝试改变这一点：

function loadPDF() {
  $('#iFramePdf').attr('src', "my.pdf");
  // Attempt to reload iframe
  $('#iFramePdf').load("my.pdf");
  sendPrint('iFramePdf')
}

到这样的事情：

function loadPDF() {
  $('#iFramePdf').attr('src', "my.pdf");
}

  $('#iFramePdf').load(function(){
  sendPrint('iFramePdf')
})

它应该可以工作

【讨论】：

【解决方案2】：

你可以试试.promise()。由于显而易见的原因，我无法对其进行测试，但我认为 3 秒应该足以加载 iframe。请注意，这在语法上是正确的，因为我无需测试就可以得到它。相应地调整fadeIn(1800) 和delay(1200)。

HTML

<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<p id="msg" style="display: none;">Printing Document...</p>
<div id="printPort" style="opacity: 0; width: 1px; height: 1px;"></div>

jQuery

   $(function() {

        $("#load_pdf").on('click', loadPDF('my.pdf'));

        // Create the iframe, and put it inside #printPort
        // Change it's src to the file argument
        // Animate the #msg for 3 seconds

        var loadPDF = function(file) {
          $('<iframe id="iFramePdf" src="blank.html"></iframe>').appendTo("#printPort");
          $("#iFramePdf").att('src', file);
          return $('#msg').fadeIn(1800).delay(1200).fadeOut();
        }

        var sendPrint = function(elementId) {
          var iframe = $(element_id)[0]; 
          iframe.contentWindow.focus(); 
          iframe.contentWindow.print();
        }

        // Once the animation is done the promise will resolve and sendPrint will execute on callback.

        $.when(loadPDF).done(sendPrint('iFramePdf'));
    });

【讨论】：