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有一些很大的好处，但它确实有时会让开发人员感到困难。