如何用js打印 iframe里面的内容

发布网友发布时间：2022-04-22 02:14

共4个回答

热心网友时间：2022-04-22 16:58

由于浏览器安全策略的*，iframe的src地址必须为同域才可以获取内容。

我做了一个案例，分别创建了一个父页面（parent.html）以及一个子页面（children.html）。代码如下：

父页面（parent.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的父页面</title>
</head>
<body>
    <iframe src="children.html" frameborder="0"></iframe>

    <script type="text/javascript">
        //获取iframe的对象。
        var iframe = document.querySelector('iframe');
        //必须使用onload来确保iframe页面内容加载完毕后再获取。
        //如果在未渲染完毕就获取，将得到“空”的结果。
        iframe.onload = function(){
            //先通过contentDocument获取iframe的文档对象。
            //再通过querySelector来获取body的对象。
            //最后使用innerHTML来获取body的HTML内容。并打印。
            alert(iframe.contentDocument.querySelector("body").innerHTML);
        }
    </script>
</body>
</html>

子页面（children.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的子页面</title>
</head>
<body>
    <p>我是子页面P元素的内容</p>
    <div id="name">我是子页面ID为name的内容</div>
</body>
</html>

其中在父页面中书写了获取子页面内容的JavaScript代码。

示例中是获取子页面body中的全部内容。结果如下：

热心网友时间：2022-04-22 18:16

如果iframe的域名与外部父网页的域名相同（具体请参考js同源策略），则可以使用如下代码获取iframe里面的内容：

var f = document.getElementById('iframe-id');  //获取到iframe标签元素
var win = f.contentWindow;  //iframe中的window对象
var doc = f.contentDocument;  //iframe中的document对象
var text = doc.getElementsByTagName("html")[0].innerHTML;  //获取html标签下的内容

如果iframe的域名与外部父网页的域名不相同，则父网页与子网页由于js同源策略而相互隔离，不允许互相访问。这是由于浏览器的安全性决定的，无法改变。

热心网友时间：2022-04-22 19:51

js 跨域名是取不到iframe里的信息的, 除非同一个域名下. 如果是同一个域名下的. var win = document.getElementById('frmid').contentWindow; var frmobj = win.document.getElementById('控件');

热心网友时间：2022-04-22 21:42

$("iframe")[0].contentDocument || $("iframe")[0].contentWindow.document

全部栏目

如何用js打印 iframe里面的内容