帮助将JavaScript点击函数转换为onLoad

我正在尝试转换一个运行点击事件的JavaScript函数，以便在页面加载和窗口调整时启动。正如你在下面看到的，我注释掉了管理点击事件的部分，并添加了最后一行"window.onload"，并手动将class="resizerd"添加到它正在处理的元素中。

该函数根本没有运行。Chrome的开发工具显示"Uncaught TypeError:无法设置未定义的属性'prevWidth'"我在哪里搞砸了语法吗？关于如何在加载时启动此功能，有什么建议吗？

谢谢！

//var clicked =  document.getElementById("buttonImportant")
  var resizeeContainer = document.getElementById('video_container');
  var resizee = resizeeContainer.getElementsByTagName('video')[0];
  /*clicked.addEventListener('click',function(){
  if( resizeeContainer.className.lastIndexOf("resizerd")>=0 ){
  }
  else
  {
      resizeeContainer.className="resizerd";
  }*/
  myResizerObject.prevWidth = resizee.offsetWidth;
  myResizerObject.prevHeight = resizee.offsetHeight;
  myResizerObject.Init();
  //},false);

    myResizerObject.prevWidth = resizee.offsetWidth;
    myResizerObject.prevHeight = resizee.offsetHeight;
    myResizerObject.Init();
    var RESIZER = function(){ 
        this.prevWidth = resizee.offsetWidth;
        this.prevHeight = resizee.offsetHeight;
        this.resizee = resizeeContainer.getElementsByTagName('video')[0];
        this.resizeeContainer = resizee.parentNode;
        this.resizeeStyle = this.resizee.style;
        var ratio = this.resizee.offsetHeight/this.resizee.offsetWidth;
        var that = this;
        this.Init = function(){
            if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
            {
                var resizeeContOffsetWidth = that.resizeeContainer.offsetWidth;
                var resizeeOffsetWidth = that.resizee.offsetWidth;
                var resizeeContOffsetHeight = that.resizeeContainer.offsetHeight;
                var resizeeOffsetHeight = that.resizee.offsetHeight;
                if(that.prevWidth!= resizeeContOffsetWidth)
                {
                    that.prevWidth = resizeeContOffsetWidth;
                    var desired = resizeeContainer.offsetHeight/resizeeContainer.offsetWidth;
                    if(desired>ratio){
                        that.resizeeStyle.width=resizeeContOffsetWidth*desired+resizeeContOffsetWidth*desired+"px";
                        that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.resizeeStyle.cssText="width:100%;height:auto;position:fixed;";
                    }
                }
                if(that.prevHeight!=resizeeContOffsetHeight)
                { 
                    that.prevHeight = resizeeContOffsetHeight;
                    var desired = resizeeContOffsetHeight/resizeeContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        //that.resizeeStyle.top = '0px';
                        that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
                        that.resizeeStyle.width = resizeeContOffsetHeight*desired+resizeeContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.resizeeStyle.top = -1*(resizeeOffsetHeight-resizeeContOffsetHeight)/2+'px';
                    }
                }
            }
        };
    };
    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;
    window.onload = myResizerObject.Init;

您是否尝试通过<body>标记执行该函数？

类似：

<body onload="myfunction();">

尝试在页面正文的OnLoad="myfunction（）；"事件中调用整个resize javascript函数。每次加载页面时，我都会调整页面大小，而且效果很好。

您有这行：

 myResizerObject.prevWidth = resizee.offsetWidth;

这可能是错误的原因。您没有对声明myResizerObject做任何操作，因此它不能具有属性prevWidth。

在下面的某个地方你做

var myResizerObject = new RESIZER();

我怀疑您希望这些行的顺序更合理：）

这样的代码应该可以正常工作：

var myResizerObject = new RESIZER();
function UpdateResizerObject() {
    var resizeeContainer = document.getElementById('video_container');
    var resizee = resizeeContainer.getElementsByTagName('video')[0];
    myResizerObject.prevWidth = resizee.offsetWidth;
    myResizerObject.prevHeight = resizee.offsetHeight;
    myResizerObject.Init();
}
window.onload = function() {
    UpdateResizerObject();
};
window.onresize = function() {
    UpdateResizerObject();
};

不过，在定义了RESIZER类之后就可以使用它了。

您的错误是在创建对象实例变量之前调用它。

编辑：一些基本调试。。向以下功能添加警报：

this.Init = function(){
   alert("Init called.. container: " + that.resizeeContainer);
   if (that.resizeeContainer)
      alert("class: " + hat.resizeeContainer.className);
   if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
   {
      ...
   }
}

看看你得到了什么。

相关内容

最新更新

热门标签：