Помогите конвертировать JavaScript click function в onLoad - PullRequest
Новая
       1

Помогите конвертировать JavaScript click function в onLoad

0 голосов
/ 26 июня 2011

Я пытаюсь преобразовать функцию JavaScript, которая запускает событие click для запуска при загрузке страницы и изменении размера окна. Как вы можете видеть ниже, я закомментировал раздел, управляющий событием click, и добавил последнюю строку «window.onload» и вручную добавил class = "resizerd" к элементу, с которым он работал.

Функция вообще не работает. Инструменты разработчика Chrome показывают «Uncaught TypeError: Невозможно установить свойство« prevWidth »из undefined» Я где-то испортил синтаксис? Любой совет, как запустить это при загрузке?

Спасибо! 

//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;

Ответы [ 4 ]

1 голос
/ 26 июня 2011

Вы пытались выполнить функцию через тег <body>?

Как: 

<body onload="myfunction();">
0 голосов
/ 26 июня 2011

Такой код должен работать просто отлично: 

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 )
   {
      ...
   }
}

И посмотри, что ты получишь.

0 голосов
/ 26 июня 2011

У вас есть эта строка: 

 myResizerObject.prevWidth = resizee.offsetWidth;

Это, вероятно, дает ошибку. Вы ничего не сделали для объявления myResizerObject, поэтому у него не может быть свойства prevWidth.

Где-то там внизу вы делаете 

var myResizerObject = new RESIZER();

Я подозреваю, что вы хотите, чтобы эти строки были в более разумном порядке:)

0 голосов
/ 26 июня 2011

Попробуйте вызвать всю функцию изменения размера javascript в OnLoad = "myfunction ();"Событие Тела страницы.Я сделал это, чтобы изменить размер страницы каждый раз, когда она загружается, и она прекрасно работает.

...