如何打印iframe的内容
[英]How to print out content of iframe
问题描述
I have some response from a server and I have put the response in the content of iframe. 
我收到了服务器的一些响应，并将响应放入了iframe的内容中。 Essentially what I need is the item number (see screenshot below), in this case it's 13. 本质上，我需要的是商品编号（请参见下面的屏幕截图），在这种情况下为13。
So I tried doing console.log($("#iframe").contents()); 所以我尝试做console.log($("#iframe").contents()); which prints out: 输出：
I have tried looking through this but cannot find the item number. 我尝试通过此方法查看，但是找不到项目编号。 Is there a easier way to get to the body and obtain the number? 有没有更简单的方法可以到达body并获取数字？
3 个解决方案
解决方案1
1 2017-08-21 21:58:32
As I understand the question: 据我了解的问题：
- There is an
<iframe>有一个<iframe> - The
<iframe>has content in a string (ieitem = 13) that's in a<pre><iframe>内容在<pre>的字符串中（即item = 13） - But you just want the number from said string (ie
13);但是，您只需要来自所述字符串的数字（即13）；
The following Demo 1 accomplishes the objectives listed above using plain JavaScript and Demo 2 uses jQuery. 以下演示1使用普通的JavaScript实现了上面列出的目标，而演示2使用jQuery。
Note: jQuery can be significantly slower than JavaScript which is apparent when dealing with loading iframes. 注意： jQuery可能比JavaScript慢得多，这在处理加载iframe时很明显。 Keep in mind that iframes are the slowest part of your load time. 请记住，iframe是加载时间中最慢的部分。 If it doesn't look like you are getting the iframe at all, then run your iframe dependant functions at window.onload . 如果看起来根本没有获得iframe，请在window.onload运行与iframe相关的功能。
Also of note: both versions of the function getNumberFromFrame(iframe, target) are reusable. 还要注意：函数getNumberFromFrame(iframe, target)两个版本均可重用。 You can use this function on a single element within an iframe and if the target element has any text with numbers✎ , it will extract those numbers regardless of the how the string is patterned. 您可以在iframe中的单个元素上使用此函数，并且如果目标元素中的任何文本带有数字text ，则无论字符串的模式如何，它都会提取这些数字。
ex. 例如 "item = 13" // 13
ex. 例如 "August 23, 2017" //23 2017
✎ Edited the regular expression on line 33 to replace non-number matches to a space. ✎编辑了第33行的正则表达式以将非数字匹配替换为空格。
Details are commented in Demo 1 and Demo 2 演示1和演示2中对详细信息进行了评论
Demo 1: PLUNKER - Plain JavaScript 演示1： PLUNKER-纯JavaScript
Demo 2: PLUNKER - jQuery 演示2： PLUNKER-jQuery
Demo 1 - Plain JavaScript: STACK 演示1-纯JavaScript：堆栈
This is provided as site requires us to post code on the answer, be aware that this copy does not function due to SO security measures . 由于站点要求我们在答案上张贴代码，因此提供此代码是，请注意，由于SO安全措施，此副本无法正常运行 。 Please review the functioning PLUNKER instead 请改为查看正在运行的PLUNKER
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h1>Parent Page</h1> <iframe id='ifrm1' name='ifrm1' src='child_page.html' width='200' height='200' scrolling='no' frameborder="1"></iframe> <br> Result: <output id='display'></output> <script> /* Pass an iframe and it's targeted content as || selectors (eg "TAG", "#ID", ".CLASS", etc) */ function getNumberFromFrame(iframe, target) { // Reference the iframe var iFrm = document.querySelector(iframe); /* Reference the iframe's Document Object by || using .contentDocument OR || .contentWindow.document properties */ var iDoc = iFrm.contentDocument || iFrm.contentWindow.document; /* Now reference the target parameter with || the iframe's Document Object. */ var iSel = iDoc.querySelector(target); // Get the target's text var iTxt = iSel.textContent; // Then filter out everything but numbers var iNum = iTxt.replace(/^\\D+/g, ''); // Ensure it is a number iNum = parseFloat(iNum); // Return number. return iNum; } /* When Window Object is loaded: || Call getNumberFromFrame() */ window.onload = function() { var result = getNumberFromFrame('#ifrm1', 'pre'); var view = document.getElementById('display'); view.textContent = result; }; </script> </body> </html>
Demo 2 - jQuery: STACK 演示2-jQuery：堆栈
This is provided as site requires us to post code on the answer, be aware that this copy does not function due to SO security measures . 由于站点要求我们在答案上张贴代码，因此提供此代码是，请注意，由于SO安全措施，此副本无法正常运行 。 Please review the functioning PLUNKER instead 请改为查看正在运行的PLUNKER
<!doctype html> <html> <head> </head> <body> <h1>Parent Page</h1> <iframe id='ifrm1' name='ifrm1' src='child_page.html' width='200' height='200' scrolling='no' frameborder="1"></iframe> <br> Result: <output id='display'></output> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script> /* Pass an iframe and it's targeted content as || selectors (eg "TAG", "#ID", ".CLASS", etc) */ function getNumberFromFrame(iframe, target) { /* .contents() method "opens" iframe || .find() will find the specified target || inside of iframe. */ var iEle = $(iframe).contents().find(target); // Get text of target var iTxt = iEle.text(); //console.log(iTxt); /* Replace anything that's not a number with || nothing. */ var iNum = iTxt.replace(/^\\D+/g, ''); // Ensure it is a number //console.log(iNum) var iRes = parseFloat(iNum); // Return number. return iNum; } // When Window Object is loaded... /* Find the element with the id of #display || Set output#display text to the return of || getNumberFromFrame('#ifrm', 'pre') */ window.onload = function() { $('#display').text(getNumberFromFrame('#ifrm1', 'pre')); } </script> </body> </html>
解决方案2
0 已采纳 2017-08-22 12:24:06
Here is a JQuery approach and it's very simple 这是一个JQuery方法，非常简单
// this will get you item = 13
var result = $("#iframe").contents().find("pre").html();
// this will get you 13
result = result.split("=")[1];
// 13
alert(result);
解决方案3
-1 2017-08-21 21:21:59
You can try this. 你可以试试看
console.log($("#iframe")["0"].contentDocument.body.firstElementChild.innerText);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.