在页面加载时运行本机 JavaScript 函数

Question

在出色的 JavaScript 向导的帮助下，我获得了一个本机 JavaScript 函数，该函数可以在单击按钮时放大 HTML5 视频的大小，然后在调整窗口大小时重新运行。

我想从等式中删除按钮，而不是在页面加载时启动它，删除类名依赖项（如果它们在按钮删除后仍然存在），同时保留窗口调整大小触发器。

谢谢感谢您的帮助！没有你我做不到。可以在 http://kzmnt.com/test/ 查看演示

：

var clicked =  document.getElementById("buttonImportant")

  var videoContainer = document.getElementById('video_container');
  var video = videoContainer.getElementsByTagName('video')[0];

  video.style.height="auto";
  video.style.width="1280px";

  clicked.addEventListener('click',function(){
    if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
        videoContainer.className="video-js-box";
        video.style.height = "";
        video.style.width="";
    }
    else
    {
        videoContainer.className="video-js-box fullScreen";
        video.style.height = "";
        video.style.width="";
    }
    myResizerObject.prevWidth = video.offsetWidth;
    myResizerObject.prevHeight = video.offsetHeight;



    myResizerObject.Init();
  },false);

    var RESIZER = function(){ 

        this.prevWidth = video.offsetWidth;
        this.prevHeight = video.offsetHeight;

        this.videoContainer = document.getElementById('video_container');
        this.video = videoContainer.getElementsByTagName('video')[0];
        this.videoStyle = this.video.style;

        var ratio = this.video.offsetHeight/this.video.offsetWidth;

        var that = this;

        this.Init = function(){
            if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
            {
                var videoContOffsetWidth = that.videoContainer.offsetWidth;
                var videoOffsetWidth = that.video.offsetWidth;
                var videoContOffsetHeight = that.videoContainer.offsetHeight;
                var videoOffsetHeight = that.video.offsetHeight;

                if(that.prevWidth!= videoContOffsetWidth)
                {
                    that.prevWidth = videoContOffsetWidth;
                    var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
                    if(desired>ratio){
                        that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
                    }
                }

                if(that.prevHeight!=videoContOffsetHeight)
                { 
                    that.prevHeight = videoContOffsetHeight;
                    var desired = videoContOffsetHeight/videoContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        that.videoStyle.top = '0px';
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                        that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';

                    }
                }

            }
        };
    };

    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;

Answer 1

您是否正在寻找类似的东西...

window.onload = mySuperCoolFunction;

为什么您需要 jQuery？也许您可以在底部以粗体明确说明您的目标/问题，以便我们可以帮助您:)

---

如果您只想初始化另一个函数，为什么不在调用其他 pre 时添加对 superCoolFunction 的调用- 编写的 jQuery 函数。例如：

$(document).ready(function() {
    center();
    mySuperCoolFunction();    // not necessary to init in another file...
});
$(window).load(function(){
    center();
    mySuperCoolFunction(); 
});
$(window).resize(function(){
    center();
    mySuperCoolFunction(); 
});

---

用 jQuery 重写：

$(function() {
$('video').eq(0).css({
    height: "auto",
    width: "1280px"
});

if ($('#video_container').hasClass('fullScreen')) {
    $('#video_container').attr('class', 'video-js-box');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    });
}
else {

    $('#video_container').attr('class', 'video-js-box fullscreen');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    }); 
}

myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
});