Setting a value of an iframe in the parent

Question

This code works on Chrome 58 but it makes me feel dirty:

parent.parent.parent.document.F1.document.getElementById("txtNewDrugAction").value = "foobar"

F1 is the name of the iFrame where the text box resides.

I am setting the value of an input box from a modal popup window (via jQuery UI). I've tried to use selectors etc, but to no avail. I feel like there would be a hugely easier way to do this that would also be more resilient to changes in the DOM but I can't see it just yet...

I also wind up writing code like this (again, functional, but awful):

window.top.document.getElementById("F1").contentWindow.document.getElementById("txtRefresh") = "foobar"

I'm maintaining a legacy application. Please nobody think that something that uses frames is being created in 2017, especially not by me.

• Chindraba: I'll agree that it "feels" dirty, and it surely is sensitive to changes in the DOM.
• I wrestled a bear once.: google maps, basically all the google plugins, facebook plugins etc.. lots of things are being developed in 2017 using iframes...
• I wrestled a bear once.: you forgot the .value in the last code snippet, so that will not function as is. also in that last snippet you can omit window unless there is another variable in scope called top. window is global and therefore always in scope and therefore never needs to be stated.

Answer 1

The simplest would be to use window.top if F1 is part of the top-most window, or possibly go top down window.top.someframe.someotherframe.F1.

An alternative might be to write a helper something like:

function getFrame(name) {
 var current = this;
 while (current) {
 if (current.document[name])
 return current.document[name].document;
 current = current.parent;
 }
 return undefined; // not found
}

• Lewis Cianci: Yeah the helper is a good idea. How could I expand that to search through controls in that iframe as well? I couldn't think of how, with document.all being deprecated.
• Marc Rohloff: You could use a second helper. iirc (as in, it's been a while since I messed around with this stuff) you could have your JS in F1 create a method, say window.setDrugAction(...) then your code would be getFrame('F1').setDrugAction('foobar'). This would separate your responsibilities more cleanly.
• I wrestled a bear once.: there's no benefit to explicitly returning undefined. just return; by itself will return undefined, or you can omit the return entirely and the function will return undefined.
• Marc Rohloff: As far as the JS runtime is concerned you are right they are the same thing but if I am returning a specific value as a flag value I always put it in so that it is obvious to anyone reading the code what is happening. As a general rule I always return explicit values when defining a function that returns something.

Answer 2

Maybe I don't get your problem so well but couldn't you interact with the parent via html5 postMessage call? Definite the protocol and then you're more decoupled from the DOM too.