duanji1610 2017-02-20 03:41
浏览 52
已采纳

onResize（）在WordPress 4.7.2中不起作用

I'm trying to display the browser window width onResize(). I've read lots of posts about it but it still isn't working. The JavaScript never runs (The alert never shows up).

This method of using onResize="dispScreenWidth()" works fine in a Bootstrap site. I know that the get_template_directory_uri() path is correct. I just installed jQuery updater but that was no help.

functions.php
<?php
    function flashdatadesign_twentytwelve_credits() {
        echo 'Website by <a href="http://example.com" title="example">';            
    }
    add_action( 'twentytwelve_credits', 'mysite_twentytwelve_credits');

    wp_enqueue_script( 'bcscript', get_template_directory_uri().'/js/bcscript.js', array ( 'jquery' ), NULL, true );
?>

header.php
<body <?php body_class(); ?> onResize="dispScreenWidth()">
    <div id="page" class="hfeed site">
        <p id="diag"></p> // --- this is just to display window.innerWidth
        <header id="masthead" class="site-header" role="banner">
        <hgroup>
       ...........
</body>

bcscript.js
jQuery(document).ready(function(){
    function dispScreenWidth() {
        jQuery('#diag').css('display', 'inline');
        jQuery('#diag').html('');
        jQuery('#diag').append(window.innerWidth + ', ');

        alert('display');
    }
});
  • 写回答

1条回答 默认 最新

  • drnysdnnb2909701 2017-02-20 03:50
    关注

    Your function is out of scope.

    You're declaring the dispScreenWidth() function inside another function so when you call it with onResize, that function is unavailable.

    Try removing it from the jQuery(document).ready scope and putting it in the main scope.

    Something like this:

    jQuery(document).ready(function(){
    //do other stuff
}); 

function dispScreenWidth() {
    jQuery('#diag').css('display', 'inline');
    jQuery('#diag').html('');
    jQuery('#diag').append(window.innerWidth + ', ');

    alert('display');
}

    Also, you can use jQuery's equivalent to onResize instead of putting it in the body tag.

    Like this:

    jQuery(document).ready(function(){
    //do other stuff
}); 

jQuery(window).on('resize', function(){
    dispScreenWidth();
}); 

function dispScreenWidth() {
    jQuery('#diag').css('display', 'inline');
    jQuery('#diag').html('');
    jQuery('#diag').append(window.innerWidth + ', ');

    alert('display');
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

    报告相同问题？

    悬赏问题

    • ¥15 telegram api 使用forward_messages方法转发消息时，目标群组里面会出现此消息来源，如何隐藏？
    • ¥15 在ubuntu中无法连接到远程服务器传输文件
    • ¥15 关于#tensorflow#的问题：有没有什么方法可以让机器自己学会像素风格的图片
    • ¥15 Oracle触发器字段变化时插入指定值
    • ¥15 docker无法进入容器内部
    • ¥15 qt https 依赖openssl 静态库
    • ¥15 python flask 报错
    • ¥15 改个密码引发的项目启动问题
    • ¥100 CentOS7单线多拨
    • ¥15 debian安装过程中老是出现无法将g21dr复制到g21dr怎么解决呀？