简体   繁体   English

页面加载后执行jquery脚本

[英]Execute jquery script after page loaded

I try to execute the following script, after the page was loaded.我尝试在页面加载后执行以下脚本。

First i included jquery.首先,我包含了 jquery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then i wrote my script:然后我写了我的脚本:

<script>
    function scale()
    {
        $hc = document.getElementById("hc").innerHTML;
        $he = document.getElementById("he").innerHTML;
        $we = document.getElementById("we").innerHTML;

        jQuery('#mydiv_cam')    .css('height', '8000px');

        jQuery('#camera')       .css('height', $hc+"px");
        jQuery('#viewport')     .css('height', $he+"px");
        jQuery('#viewport')     .css('width', $we+"px");
    }
</script>

This is my body tag这是我的身体标签

<body onload="scale();">

And inside of the body i load the variables:在身体内部我加载变量:

<p hidden="true" id="hc"> <?php echo $höhe_camera ?> </p>
<p hidden="true" id="he"> <?php echo $heightexplode[1] ?> </p>
<p hidden="true" id="we"> <?php echo $widthexplode[1] ?> </p>

But nothing happens.但什么也没有发生。

If you want to execute your function on document load then just do it this way:如果您想在文档加载时执行您的功能,那么只需这样做:

$(document).ready(function(){

    $hc = document.getElementById("hc").innerHTML;
    $he = document.getElementById("he").innerHTML;
    $we = document.getElementById("we").innerHTML;

    jQuery('#mydiv_cam')    .css('height', '8000px');

    jQuery('#camera')       .css('height', $hc+"px");
    jQuery('#viewport')     .css('height', $he+"px");
    jQuery('#viewport')     .css('width', $we+"px");
   //put everything else inside here
});

This will set this function as the ready function for the document so it will be executed as soon as the document will be fully loaded.这会将此函数设置为文档的就绪函数,以便在文档完全加载后立即执行。 Also you can remove the attribute on the body tag.您也可以删除 body 标签上的属性。 Also, you may want to fix your jQuery import:此外,您可能想要修复 jQuery 导入:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Just remove spaces before and after php tags.只需删除 php 标签前后的空格。 Write it is as below:写成如下:

<p hidden="true" id="hc"><?php echo $höhe_camera ?></p>
<p hidden="true" id="he"><?php echo $heightexplode[1] ?></p>
<p hidden="true" id="we"><?php echo $widthexplode[1] ?></p>

This will work.这将起作用。 As you are taking innerhtml of p tag in jquery it is accepting spaces also and after you are concatenating it with px so it will be consider as 1 px is style sheet which won't work.当您在 jquery 中使用 p 标签的 innerhtml 时,它也接受空格,并且在您将它与 px 连接后,它将被视为1 px是样式表,它不起作用。 Try it.尝试一下。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM