Question

I have a mainframe and a iframe:

1. I pass a function beforeIframe to mainFrame.
2. mainFrame changse URL of beforeIframe to changedIFrame.
3. When changedIFrame is loaded then execute the anonymous function.

The code below is what I want to do:

mainFrame.jsp

function randerLeftMenu(callBack) {
    $("#ifrm").attr("src", "<ui:context />/changedIframe")
    if(callBack) {
        $("#ifrm").load(function() { callBack(); });
    }
}

beforeIframe.jsp

(I have to manipulate DOM object.)

parent.randerLeftMenu(function() {$("#docType").val("aaa"); });

changedIframe.jsp

<input type="text" value="testVal" id="docType" class="input width2">

I’ve tried many things, but I can’t achieve that.

mainFrame

function randerLeftMenu(callBack) {
    if(callBack) {
        $("#ifrm").load(function() {
            with(this.contentWindow) { callBack(); }
            callBack.apply(this);
            eval(callBack());
            callBack.call(this);
            $.proxy(callBack(),this.contentWindow);
        });
    }
}

Answer 1

In your example, the $ you are including within the randerLeftMenu call out of “beforeIframe.jsp” will always be scoped to the context from which it is called. Only the this variable can be dynamically bound to a different scope. You ought to be able to get around this though by passing the function as a string (or rely on Function‘s toString() method) and evaluating the string dynamically.

Updated to include working example (tested Firefox and IE):

function randerLeftMenu(callBack) {
    $("#ifrm").attr("src", "<ui:context />/changedIframe");
    if(callBack) {
        $("#ifrm").load(function(e) {
            try {
                // This script injection and setTimeout is only necessary
                //  if you don't want to change the iframe source to add jQuery;
                //  otherwise, you only need the eval().
                var script = document.createElement('script');
                script.src = "http://code.jquery.com/jquery-latest.js";
                e.target.contentWindow.document.body.appendChild(script);
                setTimeout(function () {
                    // var evalStr = 'e.target.contentWindow.eval(\'('+callBack.toString().replace(/\n/g, ' ')+')()\')'; // You can pass the function and convert to a string for Firefox, but IE of course doesn't support it, so you will need to pass the function as a string
                    var evalStr = 'e.target.contentWindow.eval(\'('+callBack.replace(/[\r\n]/g, ' ')+')()\')';
                    eval(evalStr);
                }, 500);
            }
            catch(e) {
                alert(e);
            }
        });
    }
}