45

I have a parent document with an embedded iframe. Inside the iframe I have an upload field. Once the user selects a file to upload, I trigger a jQuery change event. On that event I want to set a variable in the parent window to true, so that the parent knows that the upload has started.

Does anyone know how to do this?

Was trying this, but didn't work:

var test;
$("#newsletter_email").change(function() {
  parent.window.test = true;

});

$('#send').click(function() {
    if (test) {
        alert('File has been uploaded!');
    } else {
        alert('You need to upload a file');
    }
});
89

Variables in the global scope are auto-exposed as DOM properties of their containing window object.

This means that

var foo = 'bar';

is analogous to

window.foo = 'bar';

Which means that you can read the global scope of any window object you can obtain a reference to. What we can also imply here is that usage of window is implicit. Even when you don't explicitly type "window.", it's there anyway.

And since frames themselves are also auto-exposed as DOM properties of the current window object, this means you can access any other frames' window object as well.

The parent property of window objects holds a reference the window object of that window's parent (if there is one). Since iframes most certainly have a parent window, then all this stuff I just typed boils down to this

// set the global variable 'foo' in the parent global scope
parent.foo = 'bar';
9
  • 4
    No. External files adopt the scope of the document into which they are included. Aug 19, 2009 at 18:46
  • 1
    whoa you're smart, i'm just a noob :( May 3, 2011 at 8:52
  • 1
    @ErmSo - No more or less than any other function. There's only two scopes in javascript: Global and Function. So, variables scoped to a function are definitely not available in the global scope. Jun 18, 2012 at 19:55
  • 2
    I just tried this in nested iframes and discovered it works to: [code]window.top.jsVar = true //use window.top to get to the top parent form Feb 7, 2014 at 18:33
  • 1
    @PeterBailey FYI you have an outdated comment here now that block scoping has come to js: let & const Oct 3, 2016 at 9:02
5

You can also store it in the localStorage and read and write from it, provided that both the main document and the iframe share the same domain.

2
  • Yeah, but not all browsers support this. Apr 23, 2013 at 17:05
  • I realize this is a bit of necroposting but it's relevant to my work now and there are a couple libraries out there (store.js and store2.js) that extend the concept of localStorage to be browser-agnostic.
    – HTTP 501
    Sep 14, 2016 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.