javascript - How to include js files in header of wordpress pages that are activated on-click -
i attempting use wordpress build website integrates google maps. doing overlays maps , use google developers api , python make appropriate javascript. have written js files , python necessary accomplish this.
my website built in worpress , add page (not home page) has n links , each 1 populate box corresponding map. can take care of layout , design issues @ loss on how to:
a) include javascript file
b) gets called upon clicking link , populates map without calling new page
that is, javascript huge because may include thousands of lat/lon points. therefore including n of these written header unreasonable. want call filename.js when link clicked.
there plugin allows me include whatever want in header. so, if can find out put *.js files (or txt file) in directory tree , how have corresponding file activated upon click should good. thanks!
this display different maps onclick event - google maps v3. kind of helps doing on-click display everyone's solution make 1 map. cannot that. overlaying vast amounts of data.
here way can done. (jump down started part of script.)
for brevity, i've included bunch of scripts in 1 'file', you'll want break them in individual files.
you may need try html , js in jsbin js bin example, b/c may or may not allow dynamic loading of js.
(function(undefined) { /** * @author (@colecmc) * @method turn collection array * @param {object} collection - nodelist, htmlcollection, etc. should have "item" method and/or "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} - token such '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 valid, false otherwise * @example observer.publish('any-valid-string',{ prop: 'this 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 saved original subscription * @example observer.unsubscribe('2'); * @example observer.unsubscribe(member); - member value returned observer.subscribe(); */ var m, foreachtopic = function(i) { if (observer.topics[m][i].token === token) { observer.topics[m].splice(i, 1); return token; } }; (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 in loop creating elements programmatically * @param {object} el - htmlelement attributes getting added * @param {object} attrs - object literal key/values desired attributes * @example setattributes(info,{ * 'id' : 'utswforminfo' * 'class' : 'my-class-name' * }); */ 'use strict'; var key; (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 page. * @param {string} url - relative path , file name - 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 ever keep js files */ el = document.createelement('script'), attrs = { defer: true, src: null, type: 'text/javascript' }; /** string based, protocol agnostic, js file url */ if (typeof fullpath === 'string' && fullpath.indexof('http') === 0) { attrs.src = fullpath; } /** string @ least 1 character , prefix our root js dir, 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; }; /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/ /** * started */ function onclick(event) { getscript('', event.target.dataset.namespaceurl); } observer.subscribe('get-script-onload-complete', function(name, resp) { /** check make resp expect, ie: correct script loaded */ /** safe 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 include js files in header of wordpress pages 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>