Question

I am doing file upload async with jquery/php using the target attribute of a form. The target is my iframe named “uploads”; To manage error in the php file, I return string like “ERR_TOO_LARGE_FILE” with an echo which will be inside the iframe body.

The problem is I don’t know how to detect when the iframe is ready and access its content to see if there’s an error. I tried the following code but it didn’t work:

$("#uploads").on("load", function() {
    alert($(this).html());
});

an alert box did appear, but nothing inside. I also tried using the ready event instead but this time, nothing appears.

Would like to know a way to achieve this or an alternate solution if you have a better one.

Answer 1

Because you’re not allowed to modify the content of an iframe, at least you’re not suppose to, you can’t directly access it using jquery. Use .contents() & .find() to get the html from the iframe so you can get the info you need.

So,

$("#uploads").on("load", function() {
    alert($(this).contents().find('html').html());
});

should return the contents of the html in the iframe. You can swap out the ‘html’ for a tag id if you know the specific element you’re looking for.