如何在外部Javascript中正确使用它

How to Properly Use this in External Javascript?

本文关键字:外部 Javascript      更新时间:2023-09-26

我有两个javascript函数工作良好,只要我保持他们在我的头标签的HTML,但我想把它们移动到一个外部的javascript文件。

function uploadImageSB() {
    Shadowbox.init({});
    // shadowbox for image upload
    Shadowbox.open({
        content: 'photo.cgi?function=photo_upload',
        player: 'iframe',
        title: 'Image Upload',
        height: 200,
        width: 500,
        options: {
            onFinish: function () {
                // get the iframe
                var iframe = document.getElementById('sb-player');
                var formName = 'photoForm';
                // add an event listener to determine when the sb form is fully loaded
                if (iframe.addEventListener) {
                    // use addEventListener for Safari, Chrome, Firefox
                    iframe.addEventListener("load", getTA(formName), true);
                } else {
                    // use attachEvent for IE
                    iframe.attachEvent("onload", getTA(formName));
                }
            }
        }
    })
};

上面的javascript调用下一个函数:

function getTA(fn) {
    // get the contents of the tinymce editor
    var ed = tinymce.activeEditor;
    var content = ed.save();
    // dynamically create textarea
    var ta = document.createElement('textarea');
    ta.textContent = content;
    ta.name = 'article';
    ta.value = ta.textContent;
    // get the iframe content
    var iframeContent = this.contentDocument || this.contentWindow.document;
    // append the textarea to the shadowbox form, but do not display it
    var form = iframeContent.getElementById(fn);
    form.appendChild(ta);
    form.getElementsByTagName('textarea')[0].style.display = 'none';
};

我认为问题是我在这里使用this:

var iframeContent = this.contentDocument || this.contentWindow.document;

但我不知道如何解决它。谢谢。

根据我的理解,当你从头部调用时,你的代码不应该工作。问题出在下面的代码。

            if (iframe.addEventListener) {
                // use addEventListener for Safari, Chrome, Firefox
                iframe.addEventListener("load", getTA(formName), true);
            } else {
                // use attachEvent for IE
                iframe.attachEvent("onload", getTA(formName));
            }

你正在调用getTA(formName)函数,因为它是在window的上下文中调用的,所以你不会得到iframe作为你的上下文。

要解决这个问题,您需要将其作为侦听器作为函数对象作为参数提供,如下所示。
编辑:使用闭包来支持对多个实例使用相同的fn。

                if (iframe.addEventListener) {
                    // use addEventListener for Safari, Chrome, Firefox
                    iframe.addEventListener("load", (function(){
                         return function(){
                              getTa.call(this, formName);
                         }
                    })(), true);
                } else {
                    // use attachEvent for IE
                    iframe.attachEvent("onload", (function(){
                         return function(){
                              getTa.call(this, formName);
                         }
                    })());
                }

应该可以了