jquery - Javascript 没有完全考虑元素的高度

Question

我有一个侧边栏 #menuOption我想让我的主要内容高度相等#contentWrapper .

我的页面的基本结构是这样的。

HTML

 <div id="wrapper">
    <div id="menuOption">
    </div>
    <div id="mainContent">
       <div id="contentWrapper">
         <div id="content">
           <div id="lartDisqus">
             <?php comments_template( ); ?>
           </div> 
         </div>
    </div>
</div>
</div>

CSS

div#wrapper{height:100%;}
div#menuOption{float:left; width:40px; background:#444; min-height:100%;}
div#mainContent{min-height:100%; margin-left:40px; z-index:0; position:relative;}
  div#contentWrapper{float:left; height:100%; width:85%; background-color:green;}
  div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden; 
    margin-top:195px;}

jQuery

jQuery(window).on("load",function(){
    var documentHeight = jQuery('#contentWrapper').height();
    jQuery('#menuOption').css('height',documentHeight + 'px');
});

jQuery(function($){
    $(window).resize(function(){
        var documentHeight = $('#contentWrapper').height();
        $('#menuOption').css('height',documentHeight + 'px');
    }).resize();   
}); 

我遇到的问题是 #mainOption != #contentWrapper ，如果我删除 php 函数 <?php comments_template( ); ?>然后一切正常，javascript 正确计算高度。

我最后加载了我的 javascript，它肯定正在加载。

就好像 javascript 没有考虑 <?php comments_template( ); ?> 输出的 HTML 的高度一样.

我已经添加了一个指向实时站点的链接并着色了 #contentWrapper这样您就可以更清楚地看到问题。 http://lartmagazine.co.uk/lorem-ipsum-dolor-sit-amet/

Answer 1

是的。您遇到问题的原因是因为您使用的是 Disqus。 Disqus 在页面加载后通过 JavaScript 生成您网站的整个评论部分，并且可能在您的 JavaScript 魔法运行之后。然而，经过一些谷歌研究，我发现你显然可以在 disqus 完成加载后 发送回调。以下是如何执行所需操作的示例。保持一切相同，除了 javascript:

function disqus_config() {
  this.callbacks.afterRender.push(function() {
    (function($){
      $(window).resize(function(){
        // you dont need the + 'px' stuff. jquery does this for you by default
        $('#menuOption').css({ height:$('#contentWrapper').height() });
      }).resize();
    })(jQuery);
  });
}

这是我找到的关于它的文章的链接。显然它在他们的 api 文档中没有记录。

http://www.electrictoolbox.com/running-javascript-functions-after-disqus-loaded/

编辑:(如果您使用 WordPress Disqus 插件)

在我最初的帖子之后，我收到了一些评论说这不起作用。所以我去我客户的一个开发站点上测试了它。果然，没有用； 但是，对于我的客户和发帖者，我追踪了为什么大多数其他用户需要这个。

根据我的建议，我的大多数客户都使用 WordPress。 WordPress 有一个由 Disqus 发布的 Disqus 插件，可以用相对较少的工作启用 Disqus 评论。经过一些调查，我发现这个插件有自己的 disqus_config() 函数，很像我发布的那个。话虽这么说，它们目前并没有以某种方式构建，因此您可以轻松地将自己的代码添加到该函数中，就像编写一个好的 WordPress 插件一样(就像我编写我的插件一样)。

考虑到这一点，不幸的是，您必须编辑插件以添加您的代码。这通常是不好的做法，因为每次更新插件时，您的代码都会消失。但是，有时候，编码糟糕的插件不会给你留下选择，你必须这样做，以实现你想要的(或者创建插件的完整副本并进行你的更改，并像其他人一样称它为你自己的似乎可以)。以下是如何编辑您的 Disqus 评论系统 WordPress 插件以满足您的需求:

从您的 WordPress 安装文档根目录，打开以下文件:

wp-content/plugins/disqus-comment-system/comments.php

在当前最新版本的插件中，在第 55 行，您会看到如下内容:

var disqus_config = function () {

此函数在第 93 行附近结束。将您的代码粘贴到这两行之间，如下所示:

var disqus_config = function () {
    // ADD THIS CODE
    this.callbacks.afterRender.push(function() {
      (function($){
        // SPECIAL SAUCE
        $(window).resize(function(){
          // you dont need the + 'px' stuff. jquery does this for you by default
          $('#menuOption').css({ height:$('#contentWrapper').height() });
        }).resize();
      })(jQuery);
    });
    // END ADD THIS CODE

    // copied from the plugin
    var config = this; // Access to the config object
    config.language = '<?php echo esc_js(apply_filters('disqus_language_filter', '')) ?>';

    /*
       All currently supported events:
        * preData — fires just before we request for initial data
        * preInit - fires after we get initial data but before we load any dependencies
        * onInit  - fires when all dependencies are resolved but before dtpl template is rendered
        * afterRender - fires when template is rendered but before we show it
        * onReady - everything is done
     */
     console.log(config);

    config.callbacks.preData.push(function() {
        // clear out the container (its filled for SEO/legacy purposes)
        document.getElementById(disqus_container_id).innerHTML = '';
    });
    <?php if (!get_option('disqus_manual_sync')): ?>
    config.callbacks.onReady.push(function() {
        // sync comments in the background so we don't block the page
        var script = document.createElement('script');
        script.async = true;
        script.src = '?cf_action=sync_comments&post_id=<?php echo $post->ID; ?>';

        var firstScript = document.getElementsByTagName( "script" )[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    });
    <?php endif; ?>
    <?php
    $sso = dsq_sso();
    if ($sso) {
        foreach ($sso as $k=>$v) {
            echo "this.page.{$k} = '{$v}';\n";
        }   
        echo dsq_sso_login();
    }   
    ?>  
};

通过此编辑，您的特殊代码应该会在正确的时间运行。它使用我上面描述的相同方法，经过一些研究后它仍然有效，但不幸的是它确实需要您编辑插件。

希望这对很多人有帮助；因为，虽然 Disqus 有一些很大的好处，但它有时确实会给开发人员带来困难。