如何按需激活jQuery/脚本？

时间：2011-03-10 作者：OleVik

我试图使用jQuery显示Wordpress页面的评论部分，但不要求jQuery出现在所有允许评论的页面上。基本上，我需要以下内容：

“视图中”jQuery插件的通用javascript实现(http://remysharp.com/2009/01/26/element-in-view-event-plugin/)当包含注释的div出现时，激活jQuery（核心）的一种方法这将加载jQuery，而jQuery又将加载页面的注释部分，但只有当该部分在浏览器视口中可见时才会加载。

问题似乎是我真的无法使用“wp\\u enqueue\\u script”（Wordpress“添加脚本的通用方式”）来实现这一点，因为它是一个PHP函数。是否有某种方法允许我实现上述功能（而不破坏Wordpress/jQuery功能）？

EDIT:只有当读者决定要阅读评论时，我才需要启用jQuery（而不是只打开一页，看到标题然后离开），这与论文的风格非常相似。Disqus似乎只有在视口中可见时才被激活，我假设，同时控制Javascript被激活。

如何在常规Javascript中执行类似操作（激活jQuery），然后将其移植到Wordpress？

3 个回复

最合适的回答,由SO网友:OleVik 整理而成

在进行了大量的google搜索后，我找到了一种方法，在了解日本地震情况的同时，也试图找到一种解决方案：

Wordpress的两个脚本使用wp_enqueue_script, 我添加了一个DeferJS(https://github.com/BorisMoore/DeferJS), 它允许在一个事件中加载脚本。此外，我还添加了一个自定义脚本，如下所示：

function gingah_comments_onLoad() {
    var element = document.getElementById("comments");
    var current = document.body.clientHeight+document.body.scrollTop;
    var target = element.offsetTop;
    if (current >= target) {
        $.defer("jquery-1.5.1.min.js", {
            bare: true 
        }).done(console.log(\'jquery-1.5.1.min.js loaded\'));
        window.onscroll = null;
    }
}
window.onscroll = gingah_comments_onLoad;

它基本上会在每次查看器滚动页面时进行快速检查，以查看是否达到目标元素（“注释”）。当它实际上在视口中可见时，DeferJS将加载jquery-1.5.1。min.js（并在console.log中插入一条快捷线路进行验证）。而且，当它变得可见时，滚动的效果被移除。

此时，jQuery将被加载并准备好使用。但是，此方法不允许使用wp_enqueue_script-函数来加载jQuery（但如果已经存在，则应该很有可能将其扩展为不尝试加载）。这是因为PHP和JS之间存在明显的分离。

我非常感谢kaiser对该方法的评论和建议，因此非常感谢您的帮助。

SO网友:kaiser

1。在头脑中注册jQuery和插件

wp_register_script( \'jquery\' );
wp_register_script( \'your_jquery_plugin\', STYLESHEETPATH, \'jquery\', \'0.0\', false );

2。注册一个元框，它应该是一个简单的复选框。请按照codex page for add_meta_box() （不要在这里重复这个）。如果遵循其余部分，那么元框的$id应该是\'jquery_comments\'.

Example (shortened):
内部functions.php

    function add_jquery_comments_meta_box() {
       $id = \'jquery_comments\';
       $title = __( \'jQuery Comments, please?\', \'your_textdomain_string\' );
       $context = \'side\'; // advanced/normal also possible
       $priority = \'low\'; // high also possible
       $callback_args = \'\'; // in case you want to extend it
       add_meta_box( $id, $title, \'add_jquery_comments_cb_fn\', \'post\', $context, $priority, $callback_args );
    }
    add_action( \'admin_init\', \'add_jquery_comments_meta_box\', 1 );

    // Prints the box content
    // Please adjust this to your needs - only slightly modified from codex example
    function add_jquery_comments_cb_fn() {
       // Use nonce for verification
      wp_nonce_field( basename(__FILE__), \'your_noncename\' );

      // The actual fields for data entry
?>
      <label for="jquery_comments"><?php _e("Do you want jquery comments on this post?", \'your_textdomain_string\' ); ?></label>
      <input type="checkbox" id="jquery_comments" name="jquery_comments" />
<?php
    }

3。将基于元框的脚本作为条件排队，然后在functions.php 文件

function add_jquery_comments_plugin() {
   wp_enqueue_script( \'jquery\' );
   wp_enqueue_script( \'your_jquery_plugin\' );
}
// and call it depending on a conditional in the comment form hook
if ( get_post_meta($post->ID, \'jquery_comments\', true) ) {
   add_action( \'comment_form\', \'add_jquery_comments_plugin\' );
}

SO网友:kaiser

在我了解了你的Q之后，我又为你得到了一个A：

--> 谷歌搜索“永无止境的页面”javascript脚本。

例如：
http://plugins.jquery.com/plugin-tags/neverending
http://plugins.jquery.com/project/in-viewport-event
http://plugins.jquery.com/project/infiniScroll

结束

小码农CODE

如何按需激活jQuery/脚本？

1。在头脑中注册jQuery和插件

相关推荐

是否值得将WP管理更新到jQuery 1.5？