Read IFrame content using JavaScript

2020-02-06 02:58发布

问题:

Ok, This is my first time dealing seriously with IFrames and I cant seem to understand a few things:

First the sample code I am testing with:

<head>
<script type="text/javascript">
function init(){
  console.log("IFrame content: " + window.frames['i1'].document.getElementsByTagName('body')[0].innerHTML);
}
</script>
</head>
<body onload="init();">
<iframe name="i1" src="foo.txt"/>
</body>

the file "foo.txt" looks like this:

sample text file

Questions:

1) The iframe seems to be behaving as a HTML document and the file text is actually part of the body instead. Why ? Is it a rule for an IFrame to be a HTML document. Is it not possible for the content of an iframe to be just plain text ??

2) The file content gets wrapped inside a pre tag for some reason. Why is this so ? Is it always the case?

3) My access method in the javascript is working but is there any other alternative? [native js solutions please] If the content is wrapped in a pre tag always then I will actually have to lookup inside the pre tag rather than lookup the innerHTML

回答1:

innerHTML does not return the exact content of an element, its a non-standardized method that returns HTML which is equivalent to the real content, and in HTML the equivalent to plain text is <pre>foo...</pre>.

You might have better luck with the innerText property..



回答2:

I was having a hard time getting the contents of a TXT file that was the src of an iframe. This is my solution:

document.getElementById( 'iframeID' ).contentWindow.document.body.innerText


回答3:

1) The iframe seems to be behaving as a HTML document and the file text is actually part of the body instead. Why ?

you’re using the DOM/JS interface. this will only work, if the content is treated as HTML/XML.



回答4:

That's how browsers treat text files, because they 'look better' this way (not only inside iframe). Browsers can process lot's of file types, and it's unreasonable to expect them to show everything in raw form, right? Because browser pages (and iframes) are about presentation, nobody really uses iframes for configuration or to read raw data from the disk.

If you want to have full control over presentation, just change file type to html and it will be treated like html. (in particular, it will solve 'pre' problem)

Will this answer your questions?