javascript - 如何在单击时激活的 wordpress 页面的标题中包含 js 文件

Question

我正在尝试使用 wordpress 构建一个集成了谷歌地图的网站。我正在用 map 做一些叠加，并使用谷歌开发者 API 和 Python 来制作适当的 javascript。我已经成功编写了完成此操作所需的 js 文件和 Python。

我的网站是在 Worpress 中构建的，我想添加一个包含 n 个链接的页面(不是主页)，每个链接都会用相应的 map 填充一个框。我可以处理布局和设计问题，但我不知道如何:

a) 将 javascript 作为文件包含在内

b) 在单击链接时被调用，因此在不调用新页面的情况下填充该 map

也就是说，javascript 非常庞大，因为它可能包含数千个纬度/经度点。因此，将 n 这些写入 header 是不合理的。单击链接时，我只想从 filename.js 调用它。

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

这Display different maps with onClick event - Google Maps V3.有点有助于进行点击显示，但每个人的解决方案都是制作一张 map 。我不能这样做。我正在覆盖大量数据。

Answer 1

您可以通过以下方式完成此操作。 (跳转到脚本的开始部分。)

为简洁起见，我在一个"file"中包含了一堆脚本，但您需要将它们分成单独的文件。

你可能还需要试试jsbin中的html和js js bin example , b/c SO可能允许也可能不允许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>