How to print out content of iframe
Question
I have some response from a server and I have put the response in the content of iframe. Essentially what I need is the item number (see screenshot below), in this case it's 13.
So I tried doing 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?
3 answers
solution1
1 2017-08-21 21:58:32
As I understand the question:
- There is an
<iframe> - The
<iframe>has content in a string (ieitem = 13) that's in a<pre> - But you just want the number from said string (ie
13);
The following Demo 1 accomplishes the objectives listed above using plain JavaScript and Demo 2 uses jQuery.
Note: jQuery can be significantly slower than JavaScript which is apparent when dealing with loading iframes. Keep in mind that iframes are the slowest part of your load time. If it doesn't look like you are getting the iframe at all, then run your iframe dependant functions at window.onload .
Also of note: both versions of the function getNumberFromFrame(iframe, target) are reusable. 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.
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.
Details are commented in Demo 1 and Demo 2
Demo 1: PLUNKER - Plain JavaScript
Demo 2: PLUNKER - jQuery
Demo 1 - Plain JavaScript: STACK
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 . Please review the functioning PLUNKER instead
<!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
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 . Please review the functioning PLUNKER instead
<!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>
solution2
0 ACCPTED 2017-08-22 12:24:06
Here is a JQuery approach and it's very simple
// 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);
solution3
-1 2017-08-21 21:21:59
You can try this.
console.log($("#iframe")["0"].contentDocument.body.firstElementChild.innerText);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.