Question

我正在尝试在onResize（）上显示浏览器窗口宽度。我已经阅读了很多关于它的帖子，但它仍然没有用。 JavaScript永远不会运行（警报永远不会显示）。

这种使用onResize =“dispScreenWidth（）”的方法在Bootstrap站点中运行良好。我知道get_template_directory_uri（）路径是正确的。我刚刚安装了jQuery更新程序但没有帮助。

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');
    }
});

Answer 1

您的功能超出了范围。

您在另一个函数中声明dispScreenWidth()函数，因此当您使用onResize调用该函数时，该函数不可用。

尝试将其从jQuery（文档）.ready范围中删除并将其放在主范围内。

这样的事情：

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

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

    alert('display');
}

此外，您可以使用与onResize等效的jQuery，而不是将其放在body标记中。

像这样：

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');
}

onResize（）在WordPress 4.7.2中不起作用

1 个答案: