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 在页面加载之后生成您网站的整个 cmets 部分，并且很可能在您的 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 插件）

在我最初的帖子之后，我收到了一些 cmets 说这不起作用。所以我去我客户的一个开发网站上对其进行了测试。果然，它没有用； 然而，我为我的客户和发帖人，以及从统计上说，大多数其他需要此功能的用户找到了原因。

根据我的建议，我的大多数客户都使用 WordPress。 WordPress 有一个 Disqus 插件，由 Disqus 发布，它使 Disqus cmets 的工作量相对较少。经过一番调查，我发现这个插件有自己的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 有一些很大的好处，但它有时确实会让开发人员感到困难。