Question

我有一个页面，其中包含一个链接列表和一个div，它用作链接指向的页面的占位符。每次用户点击链接时，都会在div中创建iframe，并且其src属性会获取链接href属性的值 - 简单明了，类似于外部网页库。我有什么问题是打印iframe的内容。为此，我使用此代码：

function PrintIframe()  
{  
frames["name"].focus();  
frames["name"].print();  
}

问题似乎是iframe是由JQuery动态创建的 - 当我将iframe插入到html代码中时，浏览器会打印外部页面。但是用JavaScript注入相同的代码没有任何反应。我试图在“打印”链接上使用JQ 1.3'live'事件，但没有成功。有办法克服这个问题吗？

Answer 1

假设这就是你的iframe：

<iframe id='print-iframe' name='print-frame-name'></iframe>

这是你使用jQuery的方法：

$("#print-iframe").get(0).contentWindow.print();

这就是你使用原生JavaScript的方式：

document.getElementById("print-iframe").contentWindow.print();

Answer 2

我尝试了这个并且能够复制这个问题。我注意到的是，在调用print函数时iframe没有完成加载。我通过在调用PrintIFrame（）时检查innerHTML的值来测试它。为了解决这个问题，您可以使用setTimeOut在x毫秒后再次调用该函数：

function PrintIframe() { 

        if (window.frames['myname'].innerHTML != "") {
            window.frames['myname'].focus();
            window.frames['myname'].print();
        } else {
            setTimeout(PrintIframe,1000);
        }    
    }

这对我有用

修改奇怪 - 我的测试代码中有一个警报，似乎可以使它工作。当我把它拿出来时，它没有用。对不起：（

无论如何，这应该使用jQuery将加载事件处理程序附加到iframe。我已经在IE8上测试了它的工作原理：

<html> <head> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function loadiFrame(src) { $("#iframeplaceholder").html("<iframe id='myiframe' name='myname' src='" + src + "' />"); } $(function() { $("#printbutton").bind("click", function() { loadiFrame('test.aspx'); $("#myiframe").load( function() { window.frames['myname'].focus(); window.frames['myname'].print(); } ); } ); }); </script> </head> <body> <input type="button" id="printbutton" value="Load iFrame" /> <div id="iframeplaceholder"></div> </body> </html>

Answer 3

我在打印iframe的内容方面遇到了问题。为了实现这一目标，请使用以下代码：

例如，你有iframe：

<iframe id='print-iframe' name='print-iframe'></iframe>

然后js打印iframe的内容调用此函数（在ie和其他浏览器中都有效）：

printIframe('print-iframe');

功能代码：

function printIframe(iFrameId) {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf ("MSIE ");
    var iframe = document.getElementById(printFrameId);

    if (msie !== 0) {
        iframe.contentWindow.document.execCommand('print', false, null);
    } else {
        iframe.contentWindow.print();
    }
}

Answer 4

嗯我能说得对吗？您只需要更改IFrame所在的来源吗？

$("#iframe").attr("src", "http://www.example.com");

Answer 5

也许相同的域名限制会阻止您的JavaScript执行。如果A和B来自同一域，则相同域限制允许帧A（或主窗口）中的JavaScript与帧B交互（例如.print（））。检查您的JavaScript错误控制台。如果你得到类似安全异常/权限错误的内容，那很可能是因为同域限制。

Answer 6

var ifrm = document.createElement("iframe");
// ifrm.style.display = "none";
document.body.appendChild(ifrm);
setTimeout(function() {
    $(ifrm).contents().find("body").html("my html content");
}, 1);
ifrm.onload = function() {
    ifrm.contentWindow.print();
}

Answer 7

我发现这是在网上搜索

$('#preview-iframe').contents().find('html').html(data);

并将其更改为

$('#preview-iframe').contents().find('html').html(data).after(function() {
    document.getElementById("preview-iframe").contentWindow.print();
});

twigstechtips

Answer 8

我知道这是一个非常古老的主题，但我有一个更好的解决方案。

它的基础 https://stackoverflow.com/a/9648159/3183069和https://stackoverflow.com/a/831547/3183069

我添加了.one（）函数，所以如果你取消打印它就不会无限循环！我也加载了一次iframe。享受

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/nav_drawer_width"
android:layout_height="190dp"
android:elevation="16dp"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/background_header">



<LinearLayout
    android:layout_width="@dimen/nav_drawer_width"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="15dp"
    android:paddingStart="15dp"
    android:paddingEnd="15dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="56dp">


    <ImageView
        android:id="@+id/user_profile"
        android:layout_width="@dimen/nav_drawer_profile_image_size"
        android:layout_height="50dp"
        android:gravity="bottom"
        app:srcCompat="@drawable/ic_account_circle_white_64dp"
        tools:ignore="ContentDescription" />

    <ImageView
        android:layout_width="@dimen/nav_drawer_width"
        android:layout_height="wrap_content"
        android:contentDescription="@string/item_desc" />


    <TextView
        android:id="@+id/txvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="3"
        android:fontFamily="roboto-bold"
        android:gravity="bottom"
        android:text="@string/user_name"
        android:textColor="@color/colorPrimaryText"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/txvEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:fontFamily="roboto"
        android:gravity="bottom"
        android:text="@string/email"
        android:textColor="@color/colorPrimaryText"
        android:textSize="14sp" />

</LinearLayout>

＆＃13;

var $body = $("body"),
  $iframe,
  loadiFrame = function(src) {
    if ($body.children('#full-prog').length == 0) {
      $body.append("<iframe id='full-prog' src='" + src + "' />");
      $iframe = $("#full-prog");
      $iframe.one('load', function() {
        $iframe.get(0).contentWindow.print();
      });
    } else {
      $iframe.get(0).contentWindow.print();
    }
  };

$("#printbutton").click(function() {
  loadiFrame('iframe source here');
});

＆＃13;

#full-prog {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

＆＃13;

Answer 9

这是一个非常古老的主题，但我找到了一个有效的解决方案。

我在jquery中添加了sleep，因此它不会打印空窗口，只需几秒即可重新加载新替换的内容。

$('#printiframe').attr('src', pdf_file_path);
setTimeout(function () {
     $("#printiframe").get(0).contentWindow.print();
}, 500);

从父窗口打印动态创建的iframe的内容

9 个答案: