How to access iframe innerText

I am adding an iframe like following:

function addIframe() {

var x = document.createElement("iframe");

x.setAttribute("id", "PDFframe");

x.setAttribute("src", "http://localhost:8080/mywebsite/boxlabelpdf.htm");

x.setAttribute("style", "visibility:hidden;");

document.body.appendChild(x);

}

And then accessing the iframe like this in my code:

var iframe = document.getElementById("PDFframe");

and console logging iframe variable, which looks like Image #1 below

Image #1 showing how iframe looks when console logged:

Image #2 - showing where base64 exists:

I want to access the base64 string which is located inside lastChild as shown in the Image #2 below.
And lastChild is located inside contentDocument as shown in the Image #1.

So first I was trying to consoe log iframe.contentDocument but it gives me an empty string <empty string>. And it looks like a HTML document so I am wondering how can I access the base64 string here?

Since your iframe is loading content from localhost:8080 and if your main page is also served from the same origin, let me see…

If you’re getting <empty string> when trying to access iframe.contentDocument, it might be due to one of these reasons:

  1. Iframe not fully loaded: Ensure that the iframe has fully loaded its content before trying to access it. Use the load event:

    iframe.onload = function() {
      var content = iframe.contentDocument || iframe.contentWindow.document;
      console.log(content);
    };
    
  2. Actual Content: If the content of the iframe is indeed an empty string, then logging it will result in an empty string. Ensure that the URL you’re setting as the src for the iframe (http://localhost:8080/mywebsite/boxlabelpdf.htm) is correct and serves content.

Given that you can see the base64 string in the lastChild inside contentDocument (from your image), the iframe appears to have content. To access the base64 string:

iframe.onload = function() {
   var content = iframe.contentDocument || iframe.contentWindow.document;
   if (content && content.lastChild) {
     console.log(content.lastChild.data); // This should give you the base64 string
   }
};

Make sure you attach this event listener before appending the iframe to the body or immediately after creating the iframe element (before the iframe gets a chance to load).

Good Luck

1 Like

Thank you. This worked with sight modification as my contentWindow doesn’t have much info:

 iframe.onload = function() {
	   var content = iframe.contentDocument;
	   console.log("Inside onload");
	   console.log(content);
	   
	   if(content){
		   console.log("Inside if content - for - content.body.innerText");
		   console.log(content.body.innerText);
	   
	   }
	
	};

I am wondering since console log already printed the iframe before trying to access the innerText, why do we still have to use onload even or why there is a wait for this?

The structure that you see in the console is a live-ish object, not a snapshot of that moment in time. The browser doesn’t inspect the values of the various properties until your expand them, so what you see is the value of the property and the moment you expanded it, not at the moment it was logged. You can see this effect with a simple script like this:

const o = {name: 'Unknown', skills: {html: 10, php: 10, javascript: 6, go: 0}};
console.log(o);
o.name='John Doe';
o.skills.javascript=5;

The console will show the collapsed object with name ‘Unknown’, once you expand it, it will show the name property as ‘John Doe’ and if you expand the skills it’ll show the javascript skill as 5.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.