Get value from an iframe via Javascript

Asked

Viewed 1,716 times

1

I have a code that is in an external file and I need to load it via Javascript, but I don’t know how to do this. I have tried several ways, and apparently the best would be with an iframe, but not even that. The idea was to use jQuery’s load() function, but it has one detail: the code is being run locally, so this does not work due to HTTP permissions and the like. So I thought I’d make an iframe like this:

<iframe id="iframe" src="script1.html"></iframe>

So I tried it like this:

var text = $("#iframe").val();

You didn’t call me back, so I tagged the file and tried it like this:

$('#iframe').contents().find("html").html();

Still, nothing. So I tried that way:

var iBody = $("#iframe").contents().find("body");
var myContent = iBody.find("#myContent");

The problem is that Chrome returns an error:

Uncaught Securityerror: Failed to read the 'contentDocument' Property from 'Htmliframeelement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, Omains, and ports must match.

That is, is there no way to load a file locally? I just need a clean file with the codes to upload later, I’d even put it directly inside a tag inside the page, but that would be much dirty, since someone else will change the code. Note: This code that should be loaded to which I refer is a text document, IE, you can interpret as you like, simply, are several sentences, nothing special about it.

javascript jquery html

  • When you say "external file" you mean another site or file other than the one where you have the iframe (location, on the same server)?

  • It’s in the same folder as the HTML file, and the files aren’t being run on a server, it’s just double-clicking "index.html".

2 answers

1


This is not possible locally because of the protections that browsers have.

You can make it work if you have the file on a server and if the server in question accepts requests from other domains, otherwise the rule is the same.

This safety rule is known for CORS (cross-source resource sharing), a W3C security recommendation that has been adopted by browsers to prevent access to data improperly.

  • I understand, so there’s no other way to load this external text locally? And by the way, thanks for the tip to come to the site in Portuguese ;)

  • @Not locally Rafaelalmeida. You’re welcome!

0

Chrome does not allow uploading a file from the file system using Xmlhttprequest (Ajax). I myself have had this problem while testing HTML files with Ajax calls.

Each browser applies different rules on uploading files from the same source (CORS) when it comes to local files (uploaded via file://..., which is what happens when you double-click the HTML document in the folder).

I found some recommendations on running Chrome with the flag --allow-file-access-from-files, but I was unsuccessful.

To solve this problem, I created my own mini web server that runs in a specific folder. You can try using the Node.js to do something similar.

You can also try another browser that is less restrictive.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.