如何在点击激活的wordpress页面的标题中包含js文件

Question

我试图使用wordpress来构建一个整合谷歌地图的网站。我正在对地图进行一些覆盖，并使用和Python来生成适当的javascript。我已经成功地编写了完成这一任务所需的js文件和Python。

我的网站是建立在Worpress，我想添加一个页面(不是主页)，有n个链接，每一个将填充与相应的地图框。我可以处理布局和设计方面的问题，但我不知道如何：

( a)将javascript作为文件包括在

( b)在单击链接时被调用，从而填充该地图而不调用新页。

也就是说，javascript是巨大的，因为它可能包含数千个lat/lon点数。因此，将其中n个写入标头是不合理的。我只想在点击链接时从filename.js调用它。

有一个插件，允许我包括任何我想要的标题。因此，如果我能够找到将*.js文件(或txt文件)放在目录树中的位置，以及如何在单击时激活相应的文件，那么我应该很好。谢谢!

这种使用onClick事件显示不同的地图- Google V3。可以帮助进行点击显示，但是每个人的解决方案都是制作一张地图。我不能那样做。我正在堆叠大量的数据。

Answer 1

这里有一个方法你可以做到这一点。(跳到脚本的get开始部分。)

为了简洁起见，我已经在一个“文件”中包含了一堆脚本，但是您需要将它们分解到单个文件中。

您还可能需要尝试jsbin js bin示例、b/c中的html和js，以便允许或不允许动态加载js。

​

(function(undefined) {
  /**
   * @author (@colecmc)
   * @method turn collection into an array
   * @param {object} collection - NodeList, HTMLCollection, etc. Should have an "item" method and/or a "length" property
   */
  ToArray = collection => Array.prototype.slice.call(collection);

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/


  Observer = (function(undefined) {
    /**
     * pub sub
     */
    'use strict';

    var subUid = -1;
    return {
      topics: {},

      subscribe: function(topic, func) {
        /**
         * @param {string} topic
         * @param {function} func
         * @returns {string} - a token such as '3'
         * @example Observer.subscribe('any-valid-string',function(name,resp){
                console.log(resp.prop);
            });
         */
        if (!Observer.topics[topic]) {
          Observer.topics[topic] = [];
        }

        var token = (++subUid).toString();
        Observer.topics[topic].push({
          token: token,
          func: func
        });

        return token;
      },

      publish: function publish(topic, args) {
        /**
         * @param {string} topic
         * @param {object} args
         * @returns {boolean} - true if topic is valid, false otherwise
         * @example Observer.publish('any-valid-string',{
                prop: 'this is a test'
            });
         */
        if (!Observer.topics[topic]) {
          return false;
        }

        setTimeout(function() {
          var subscribers = Observer.topics[topic],
            len = subscribers ? subscribers.length : 0;

          while (len--) {
            subscribers[len].func(topic, args);
          }
        }, 0);

        return true;
      },

      unsubscribe: function unsubscribe(token) {
        /**
         * @param {string} token - value should be saved from the original subscription
         * @example Observer.unsubscribe('2');
         * @example Observer.unsubscribe(member); - where member is the value returned by Observer.subscribe();
         */
        var m,
          forEachTopic = function(i) {
            if (Observer.topics[m][i].token === token) {
              Observer.topics[m].splice(i, 1);
              return token;
            }
          };

        for (m in Observer.topics) {
          if (Observer.topics.hasOwnProperty(m)) {
            Observer.topics[m].forEach(forEachTopic);
          }
        }

        return false;
      }
    };
  }(undefined));
  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/

  SetAttributes = function(el, attrs) {
    /**
     * @author (@colecmc)
     * @method simple for in loop to help with creating elements programmatically
     * @param {object} el - HTMLElement attributes are getting added to
     * @param {object} attrs - object literal with key/values for desired attributes
     * @example SetAttributes(info,{
     *    'id' : 'utswFormInfo'
     *    'class' : 'my-class-name'
     * });
     */

    'use strict';
    var key;

    for (key in attrs) {
      if (attrs.hasOwnProperty(key)) {
        el.setAttribute(key, attrs[key]);
      }
    }

    return el;
  };

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/


  GetScript = function(url, fullPath) {
    /**
     * @author (@colecmc)
     * @version 1.0.4
     * @requires Swlxws.SetAttributes, Swlxws.Observer
     * @method dynamically add script tags to the page.
     * @param {string} url - relative path and file name - do not include extension
     * @param {string} fullPath - absolute path
     * @example GetScript('myLocalScript');
     * @example GetScript('','https://www.google-analytics.com/analytics.js');
     */

    'use strict';

    function onLoad(event) {
      var result;

      if (event.type === 'load') {
        result = 1;
      } else {
        result = -1;
      }

      Observer.publish('get-script-onload-complete', {
        successful: result,
        eventData: event
      });
    }

    var JSPATH = '/js/',
      /* or where ever you keep js files */
      el = document.createElement('script'),
      attrs = {
        defer: true,
        src: null,
        type: 'text/javascript'
      };

    /** look for a string based, protocol agnostic, js file url */
    if (typeof fullPath === 'string' && fullPath.indexOf('http') === 0) {
      attrs.src = fullPath;
    }

    /** look for any string with at least 1 character and prefix our root js dir, then append extension */
    if (typeof url === 'string' && url.length >= 1) {
      attrs.src = JSPATH + url + '.js';
    }

    SetAttributes(el, attrs);

    el.addEventListener('load', onLoad);
    el.addEventListener('error', onLoad);

    document.body.appendChild(el);

    return el;
  };

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/

  /**
   * Get Started
   */
  function onClick(event) {
    GetScript('', event.target.dataset.namespaceUrl);
  }

  Observer.subscribe('get-script-onload-complete', function(name, resp) {
    /** check to make resp is what you expect, ie: the correct script loaded */
    /** then it is safe to use */
  });

  ToArray(document.querySelectorAll('.load-scripts')).map(script => script.addEventListener('click', onClick, false));

}(undefined));

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>How to include js files in header of wordpress pages that are activated on-click</title>
</head>

<body>

  <a href="#load" class="load-scripts" data-namespace-url="https://www.google-analytics.com/analytics.js">Load Google Analytics</a>

</body>

</html>

​

Answer 2

您可以使用函数wp_enqueue_script()只在所需的模板上加载必要的JS文件。

至于您的大型数据集，我建议您将其缓存在外部.json文件中，并在必要时使用wp_enqueue_script()加载它。

Answer 3

好吧，如果onclick事件的建议是你想要的，而你只是关心大量的数据。然后有几种方法来解决这个问题。我不确定dataset是js文件还是php/json文件，但我在我的一个项目中遇到了类似的问题，不太记得了，但我正在使用maxmind的ip/location数据集做一些事情。

所以我就把这个大文件分成三个小的。然后我循环遍历每个文件，如果我正在寻找的东西在文件中被找到，那么我就退出了。当然，正如Brian所建议的那样，缓存和使用CDN会有很大帮助。