Question

我从服务器得到一些回复，我已将响应放在iframe的内容中。基本上我需要的是项目编号（见下面的截图），在这种情况下它是13。

所以我尝试了console.log($("#iframe").contents());打印出来：

我已经尝试过查看但无法找到商品编号。有没有更简单的方法来到body并获得号码？

Answer 1

据我所知，问题是：

有一个item = 13
<pre>包含13

window.onload

但是您只需要来自所述字符串的数字（即getNumberFromFrame(iframe, target)）;

以下演示1使用纯JavaScript实现上面列出的目标，演示2使用jQuery。

注意： jQuery可能比JavaScript慢得多，这在处理加载iframe时很明显。请注意，iframe是加载时间中最慢的部分。如果您看起来根本没有获得iframe，请在"item = 13" // 13处运行与iframe相关的功能。

同样值得注意：函数"August 23, 2017" //23 2017的两个版本都是可重用的。您可以在iframe中的单个元素上使用此函数，如果目标元素具有任何带有数字的文本，它将提取这些数字，而不管字符串的图案如何。

离。 <!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 (e.g. "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>

离。 <!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 (e.g. "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>

✎编辑第33行的正则表达式，将非数字匹配替换为空格。

详情在演示1和演示2中进行了评论

演示1：PLUNKER - Plain JavaScript

演示2：PLUNKER - jQuery

演示1 - 普通JavaScript：STACK

这是因为网站要求我们在答案上发布代码，请注意，由于SO安全措施，此副本无法正常运行。请检查功能PLUNKER而不是

{{1}}

演示2 - jQuery：STACK

这是因为网站要求我们在答案上发布代码，请注意，由于SO安全措施，此副本无法正常运行。请检查功能PLUNKER而不是

{{1}}

Answer 2

这是一个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);

Answer 3

你可以试试这个。

console.log($("#iframe")["0"].contentDocument.body.firstElementChild.innerText);

Working evidence

如何打印出iframe的内容

3 个答案:

演示1：PLUNKER - Plain JavaScript

演示2：PLUNKER - jQuery

演示1 - 普通JavaScript：STACK

演示2 - jQuery：STACK