We Keep Coding

Use onclick on a button to start javascript

Hi there I'm pretty new to using functions and onclick actions to call javascript so I could do with some help. Basically, I've installed a plugin on WordPress which adds a button to the page in the form of a widget and once clicked it starts a script. However, I don't like their button so I'm trying to code my own but I want it to start the script like there's.
Here's the script code:
/*
* Timely BookButton plugin
* Example usage:
* var button = new timelyButton('doedayspa');
*
* Booking process can be kicked off manually by calling the start method on the button instance e.g.
* button.start();
*
*/
// Need this for legacy support of older versions of the BookingButton
var timelyButton;
(function () {
"use strict";
var context = window;
var mobile = {
Android: function () {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPod/i) ? true : false;
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function () {
return (mobile.Android() || mobile.BlackBerry() || mobile.iOS() || mobile.Windows());
}
};
timelyButton = function (id, opts) {
var options = opts || {};
var businessId = id;
var resellerCode = options.reseller || resellerCode || '';
var productId = options.product || productId || '';
var categoryId = options.category || categoryId || '';
var staffId = options.staff || staffId || '';
var locationId = options.location || locationId || '';
var giftVoucherId = options.giftVoucherId || giftVoucherId || '';
var isPurchaseButton = options.isPurchaseButton != null ? options.isPurchaseButton : false; // default not a purchase
var dontCreateButton = !!options.dontCreateButton;
window.timelyBookFrame = {};
var XD;
var style = options.style || 'light';
var buttonId = options.buttonId || false;
var bookButton;
var scriptSource = (function() {
var script = document.getElementById('timelyScript');
if (script.getAttribute.length !== undefined) {
return script.src;
}
return script.getAttribute('src', -1);
}());
var isOwnImage = !!options.imgSrc;
var imgButtonType = isPurchaseButton ? "purchase-buttons" : "book-buttons";
var imgSrc = options.imgSrc || getDomain() + '/images/' + imgButtonType + '/button_' + style + '#2x.png';
var hoverSrc = getDomain() + '/images/' + imgButtonType + '/button_' + style + '_hover#2x.png';
var activeSrc = getDomain() + '/images/' + imgButtonType + '/button_' + style + '_active#2x.png';
var locationUrl = (isPurchaseButton ? '/giftvoucher/details/' : '/booking/location/') + businessId;
function init() {
if (dontCreateButton) return true;
if (isOwnImage) {
bookButton = document.createElement('a');
bookButton.href = 'javascript:void(0)';
bookButton.onclick = eventHandler.prototype.Book;
bookButton.innerHTML = '<img src=\'' + imgSrc + '\' border=\'0\' />';
} else {
bookButton = document.createElement('a');
bookButton.style.backgroundImage = "url(" + imgSrc + ")";
bookButton.style.backgroundRepeat = "no-repeat";
bookButton.style.backgroundPosition = "0px 0px";
bookButton.style.backgroundSize = (isPurchaseButton ? "220px" : "162px") + " 40px";
bookButton.style.width = isPurchaseButton ? "220px" : "162px";
bookButton.style.height = "40px";
bookButton.style.display = "inline-block";
bookButton.href = 'javascript:void(0)';
bookButton.onclick = eventHandler.prototype.Book;
bookButton.innerHTML += '<img src="' + hoverSrc + '" style="display:none;" border=\'0\' />';
bookButton.innerHTML += '<img src="' + activeSrc + '" style="display:none;" border=\'0\' />';
bookButton.onmouseenter = function() { this.style.backgroundImage = "url(" + hoverSrc + ")"; };
bookButton.onmouseout = function () { this.style.backgroundImage = "url(" + imgSrc + ")"; };
bookButton.onmousedown = function () { this.style.backgroundImage = "url(" + activeSrc + ")"; };
bookButton.onmouseup = function () { this.style.backgroundImage = "url(" + hoverSrc + ")"; };
}
var insertionPoint = findInsertionPoint(buttonId);
insertAfter(bookButton, insertionPoint);
}
function findInsertionPoint(buttonId) {
var insertionPoint = false;
if (buttonId) {
insertionPoint = document.getElementById(buttonId);
} else {
if (("currentScript" in document)) {
insertionPoint = document.currentScript;
} else {
var scripts = document.getElementsByTagName('script');
insertionPoint = scripts[scripts.length - 1];
}
}
return insertionPoint;
}
function getDomain() {
return ('https:' == document.location.protocol ? 'https://' : 'http://') + scriptSource.match( /:\/\/(.[^/]+)/ )[1];
}
function startBooking() {
var url = "";
if (resellerCode) {
url += '&reseller=' + resellerCode;
}
if (productId) {
url += '&productId=' + productId;
}
if (categoryId) {
url += '&categoryId=' + categoryId;
}
if (staffId) {
url += '&staffId=' + staffId;
}
if (locationId) {
url += '&locationId=' + locationId;
}
if (giftVoucherId) {
url += '&giftVoucherId=' + giftVoucherId;
}
if (window.innerWidth < 768 || mobile.any()) {
url = getDomain() + locationUrl + "?mobile=true" + url;
window.location.href = url;
return;
}
window.timelyBookFrame = document.createElement('iframe');
window.timelyBookFrame.className = 'timely-book-frame';
window.timelyBookFrame.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999999;';
window.timelyBookFrame.setAttribute('frameBorder', 0);
window.timelyBookFrame.setAttribute('allowTransparency', 'true');
url = getDomain() + (isPurchaseButton ? '/giftvoucher' : '/booking') + '/overlay/' + businessId + '?x' + url;
url += '#' + encodeURIComponent(document.location.href);
window.timelyBookFrame.src = url;
window.timelyBookFrame.style.display = 'none';
document.getElementsByTagName('body')[0].appendChild(window.timelyBookFrame);
var element = document.getElementById('timely-lightbox');
if (typeof(element) != 'undefined' && element != null) {
$('#timely-lightbox').fadeOut();
}
}
function insertAfter(f, n) {
var p = n.parentNode;
if (n.nextSibling) {
p.insertBefore(f, n.nextSibling);
} else {
p.appendChild(f);
}
}
function eventHandler() {
// prototype instance
}
eventHandler.prototype.Book = function() {
startBooking();
};
// everything is wrapped in the XD function to reduce namespace collisions
XD = function () {
var interval_id,
last_hash,
cache_bust = 1,
attached_callback,
window = context;
return {
postMessage: function (message, target_url, target) {
if (!target_url) {
return;
}
target = target || parent; // default to parent
if (window['postMessage']) {
// the browser supports window.postMessage, so call it with a targetOrigin
// set appropriately, based on the target_url parameter.
target['postMessage'](message, target_url.replace(/([^:]+:\/\/[^\/]+).*/, '$1'));
} else if (target_url) {
// the browser does not support window.postMessage, so use the window.location.hash fragment hack
target.location = target_url.replace(/#.*$/, '') + '#' + (+new Date) + (cache_bust++) + '&' + message;
}
},
receiveMessage: function (callback, source_origin) {
// browser supports window.postMessage
if (window['postMessage']) {
// bind the callback to the actual event associated with window.postMessage
if (callback) {
attached_callback = function (e) {
if ((typeof source_origin === 'string' && e.origin !== source_origin)
|| (Object.prototype.toString.call(source_origin) === "[object Function]" && source_origin(e.origin) === !1)) {
return !1;
}
callback(e);
};
}
if (window['addEventListener']) {
window[callback ? 'addEventListener' : 'removeEventListener']('message', attached_callback, !1);
} else {
window[callback ? 'attachEvent' : 'detachEvent']('onmessage', attached_callback);
}
} else {
// a polling loop is started & callback is called whenever the location.hash changes
interval_id && clearInterval(interval_id);
interval_id = null;
if (callback) {
interval_id = setInterval(function () {
var hash = document.location.hash,
re = /^#?\d+&/;
if (hash !== last_hash && re.test(hash)) {
last_hash = hash;
callback({ data: hash.replace(re, '') });
}
}, 100);
}
}
}
};
}();
// setup a callback to handle the dispatched MessageEvent. if window.postMessage is supported the passed
// event will have .data, .origin and .source properties. otherwise, it will only have the .data property.
XD.receiveMessage(function (message) {
if (message.data == 'close') {
var element = document.getElementById('timely-lightbox');
if (typeof (element) != 'undefined' && element != null) {
$('#timely-lightbox').show();
}
if (window.timelyBookFrame && window.timelyBookFrame.parentNode) window.timelyBookFrame.parentNode.removeChild(window.timelyBookFrame);
}
if (message.data == 'open' && window.timelyBookFrame) {
window.timelyBookFrame.style.display = 'block';
}
}, getDomain());
init();
// expose the BookButton API
return {
start: function() {
startBooking();
}
};
};
})();
So how can I run this javascript when I click the button?
Any help would be greatly appreciated!

You could create a script tag automatically if the button has been clicked.
document.getElementById('myButton').addEventListener('click', () => {
const script = document.createElement("script");
script.src = 'my-other-file.js';
document.head.appendChild(script);
})
<button id="myButton">Load JS File</button>

How i can use FileSaver.js module without Node.Js?

i have visited a github code to increase effort for saving a file from javascript/html. We have some problem with to use it, because it mae for node.js. I'v found some demo.js code to save the file from demo.html itself. But, it is useless because i unfortunatly can't edit, because i wonder it just for demo.html class, and it will become crash if i make a reference to another html file.
This is the code File Saver.js
/* FileSaver.js * A saveAs() FileSaver implementation. * 1.3.2 * 2016-06-16 18:25:19 * * By Eli Grey, http://eligrey.com * License: MIT * See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md */
/*global self */ /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
/*! #source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js
*/
var saveAs = saveAs || (function(view) { "use strict"; // IE <10 is explicitly unsupported if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) { return; } var
doc = view.document
// only get URL when necessary in case Blob.js hasn't overridden it yet , get_URL = function() { return view.URL || view.webkitURL || view; } , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a") , can_use_save_link = "download" in save_link , click = function(node) { var event = new MouseEvent("click"); node.dispatchEvent(event); } , is_safari = /constructor/i.test(view.HTMLElement) || view.safari , is_chrome_ios
=/CriOS\/[\d]+/.test(navigator.userAgent) , throw_outside = function(ex) { (view.setImmediate || view.setTimeout)(function() {
throw ex; }, 0); } , force_saveable_type = "application/octet-stream" // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to , arbitrary_revoke_timeout = 1000 * 40 // in ms , revoke = function(file) { var revoker = function() {
if (typeof file === "string") { // file is an object URL
get_URL().revokeObjectURL(file);
} else { // file is a File
file.remove();
} }; setTimeout(revoker, arbitrary_revoke_timeout); } , dispatch = function(filesaver, event_types, event) { event_types = [].concat(event_types); var i = event_types.length; while (i--) {
var listener = filesaver["on" + event_types[i]];
if (typeof listener === "function") {
try {
listener.call(filesaver, event || filesaver);
} catch (ex) {
throw_outside(ex);
}
} } } , auto_bom = function(blob) { // prepend BOM for UTF-8 XML and text/* types (including HTML) // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); } return blob; } , FileSaver = function(blob, name, no_auto_bom) { if (!no_auto_bom) {
blob = auto_bom(blob); } // First try a.download, then web filesystem, then object URLs var
filesaver = this
, type = blob.type
, force = type === force_saveable_type
, object_url
, dispatch_all = function() {
dispatch(filesaver, "writestart progress write writeend".split(" "));
}
// on any filesys errors revert to saving with object URLs
, fs_error = function() {
if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
// Safari doesn't allow downloading of blob urls
var reader = new FileReader();
reader.onloadend = function() {
var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
var popup = view.open(url, '_blank');
if(!popup) view.location.href = url;
url=undefined; // release reference before dispatching
filesaver.readyState = filesaver.DONE;
dispatch_all();
};
reader.readAsDataURL(blob);
filesaver.readyState = filesaver.INIT;
return;
}
// don't create more object URLs than needed
if (!object_url) {
object_url = get_URL().createObjectURL(blob);
}
if (force) {
view.location.href = object_url;
} else {
var opened = view.open(object_url, "_blank");
if (!opened) {
// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
view.location.href = object_url;
}
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
} ; filesaver.readyState = filesaver.INIT;
if (can_use_save_link) {
object_url = get_URL().createObjectURL(blob);
setTimeout(function() {
save_link.href = object_url;
save_link.download = name;
click(save_link);
dispatch_all();
revoke(object_url);
filesaver.readyState = filesaver.DONE;
});
return; }
fs_error(); } , FS_proto = FileSaver.prototype , saveAs = function(blob, name, no_auto_bom) { return new FileSaver(blob, name || blob.name || "download", no_auto_bom); } ; // IE 10+ (native saveAs) if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) { return function(blob, name, no_auto_bom) { name = name || blob.name || "download";
if (!no_auto_bom) {
blob = auto_bom(blob); } return navigator.msSaveOrOpenBlob(blob, name); }; }
FS_proto.abort = function(){}; FS_proto.readyState = FS_proto.INIT = 0; FS_proto.WRITING = 1; FS_proto.DONE = 2;
FS_proto.error = FS_proto.onwritestart = FS_proto.onprogress = FS_proto.onwrite = FS_proto.onabort = FS_proto.onerror = FS_proto.onwriteend = null;
return saveAs; }(
typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content )); // `self` is undefined in Firefox for Android content script context // while `this` is nsIContentFrameMessageManager // with an attribute `content` that corresponds to the window
if (typeof module !== "undefined" && module.exports) { module.exports.saveAs = saveAs; } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) { define("FileSaver.js", function() {
return saveAs; }); }
And the demo.js
/*! FileSaver.js demo script
* 2016-05-26
*
* By Eli Grey, http://eligrey.com
* License: MIT
* See LICENSE.md
*/
/*! #source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
/*jshint laxbreak: true, laxcomma: true, smarttabs: true*/
/*global saveAs, self*/
(function(view) {
"use strict";
// The canvas drawing portion of the demo is based off the demo at
// http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
var
document = view.document
, $ = function(id) {
return document.getElementById(id);
}
, session = view.sessionStorage
// only get URL when necessary in case Blob.js hasn't defined it yet
, get_blob = function() {
return view.Blob;
}
, canvas = $("canvas")
, canvas_options_form = $("canvas-options")
, canvas_filename = $("canvas-filename")
, canvas_clear_button = $("canvas-clear")
, text = $("text")
, text_options_form = $("text-options")
, text_filename = $("text-filename")
, html = $("html")
, html_options_form = $("html-options")
, html_filename = $("html-filename")
, ctx = canvas.getContext("2d")
, drawing = false
, x_points = session.x_points || []
, y_points = session.y_points || []
, drag_points = session.drag_points || []
, add_point = function(x, y, dragging) {
x_points.push(x);
y_points.push(y);
drag_points.push(dragging);
}
, draw = function(){
canvas.width = canvas.width;
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.strokeStyle = "#000000";
var
i = 0
, len = x_points.length
;
for(; i < len; i++) {
ctx.beginPath();
if (i && drag_points[i]) {
ctx.moveTo(x_points[i-1], y_points[i-1]);
} else {
ctx.moveTo(x_points[i]-1, y_points[i]);
}
ctx.lineTo(x_points[i], y_points[i]);
ctx.closePath();
ctx.stroke();
}
}
, stop_drawing = function() {
drawing = false;
}
// Title guesser and document creator available at https://gist.github.com/1059648
, guess_title = function(doc) {
var
h = "h6 h5 h4 h3 h2 h1".split(" ")
, i = h.length
, headers
, header_text
;
while (i--) {
headers = doc.getElementsByTagName(h[i]);
for (var j = 0, len = headers.length; j < len; j++) {
header_text = headers[j].textContent.trim();
if (header_text) {
return header_text;
}
}
}
}
, doc_impl = document.implementation
, create_html_doc = function(html) {
var
dt = doc_impl.createDocumentType('html', null, null)
, doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)
, doc_el = doc.documentElement
, head = doc_el.appendChild(doc.createElement("head"))
, charset_meta = head.appendChild(doc.createElement("meta"))
, title = head.appendChild(doc.createElement("title"))
, body = doc_el.appendChild(doc.createElement("body"))
, i = 0
, len = html.childNodes.length
;
charset_meta.setAttribute("charset", html.ownerDocument.characterSet);
for (; i < len; i++) {
body.appendChild(doc.importNode(html.childNodes.item(i), true));
}
var title_text = guess_title(doc);
if (title_text) {
title.appendChild(doc.createTextNode(title_text));
}
return doc;
}
;
canvas.width = 500;
canvas.height = 300;
if (typeof x_points === "string") {
x_points = JSON.parse(x_points);
} if (typeof y_points === "string") {
y_points = JSON.parse(y_points);
} if (typeof drag_points === "string") {
drag_points = JSON.parse(drag_points);
} if (session.canvas_filename) {
canvas_filename.value = session.canvas_filename;
} if (session.text) {
text.value = session.text;
} if (session.text_filename) {
text_filename.value = session.text_filename;
} if (session.html) {
html.innerHTML = session.html;
} if (session.html_filename) {
html_filename.value = session.html_filename;
}
drawing = true;
draw();
drawing = false;
canvas_clear_button.addEventListener("click", function() {
canvas.width = canvas.width;
x_points.length =
y_points.length =
drag_points.length =
0;
}, false);
canvas.addEventListener("mousedown", function(event) {
event.preventDefault();
drawing = true;
add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);
draw();
}, false);
canvas.addEventListener("mousemove", function(event) {
if (drawing) {
add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);
draw();
}
}, false);
canvas.addEventListener("mouseup", stop_drawing, false);
canvas.addEventListener("mouseout", stop_drawing, false);
canvas_options_form.addEventListener("submit", function(event) {
event.preventDefault();
canvas.toBlobHD(function(blob) {
saveAs(
blob
, (canvas_filename.value || canvas_filename.placeholder) + ".png"
);
}, "image/png");
}, false);
text_options_form.addEventListener("submit", function(event) {
event.preventDefault();
var BB = get_blob();
saveAs(
new BB(
[text.value || text.placeholder]
, {type: "text/plain;charset=" + document.characterSet}
)
, (text_filename.value || text_filename.placeholder) + ".txt"
);
}, false);
html_options_form.addEventListener("submit", function(event) {
event.preventDefault();
var
BB = get_blob()
, xml_serializer = new XMLSerializer()
, doc = create_html_doc(html)
;
saveAs(
new BB(
[xml_serializer.serializeToString(doc)]
, {type: "application/xhtml+xml;charset=" + document.characterSet}
)
, (html_filename.value || html_filename.placeholder) + ".xhtml"
);
}, false);
view.addEventListener("unload", function() {
session.x_points = JSON.stringify(x_points);
session.y_points = JSON.stringify(y_points);
session.drag_points = JSON.stringify(drag_points);
session.canvas_filename = canvas_filename.value;
session.text = text.value;
session.text_filename = text_filename.value;
session.html = html.innerHTML;
session.html_filename = html_filename.value;
}, false);
}(self));
The html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head>
<meta charset="utf-8"/>
<title>FileSaver.js demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/702cd2e820b680f88a0f299e33085c196806fc52/demo/demo.css"/>
</head>
<body>
<h1>FileSaver.js demo</h1>
<p>
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the <code>saveAs()</code> FileSaver interface, without contacting any servers.
</p>
<section id="image-demo">
<h2>Saving an image</h2>
<canvas class="input" id="canvas" width="500" height="300"/>
<form id="canvas-options">
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
<input type="submit" value="Save"/>
<input type="button" id="canvas-clear" value="Clear"/>
</form>
</section>
<section id="text-demo">
<h2>Saving text</h2>
<textarea class="input" id="text" placeholder="Once upon a time..."/>
<form id="text-options">
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
<input type="submit" value="Save"/>
</form>
</section>
<section id="html-demo">
<h2>Saving rich text</h2>
<div class="input" id="html" contenteditable="">
<h3>Some example rich text</h3>
<ul>
<li><del>Plain</del> <ins>Boring</ins> text.</li>
<li><em>Emphasized text!</em></li>
<li><strong>Strong text!</strong></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
<circle cx="35" cy="35" r="35" fill="red"/>
<text x="10" y="40">image</text>
</svg>
</li>
<li>A link.</li>
</ul>
</div>
<form id="html-options">
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
<input type="submit" value="Save"/>
</form>
</section>
<script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
<script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"/>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/597b6cd0207ce408a6d34890b5b2826b13450714/demo/demo.js"/>
</body>
</html>

Firstly, nothing in the code you've show is related to node.js - so using fileSaver.js without node.js is not an issue
The simplest example I can come up with to demonstrate how to use it using a Blob and a File is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- you'll need to host fileSaver.js on your own host -->
<script src="fileSaver.js"></script>
</head>
<body>
<div id="source">This is some text</div>
<input id="saveFile" type="button" value="saveFile" />
<script>
document.getElementById('saveFile').addEventListener('click', function(e) {
var text = document.getElementById('source').innerHTML;
var file = new File([text], "hello world.txt", {type: "text/plain;charset=utf-8"});
// save it
saveAs(file);
});
</script>
</body>
</html>

How can i convert this exit popup from an iframe to a redirect?

Trust me, I hate these just as much as you. It's for a client though so it's not up to me to determine what they should be doing :)
here's how you use it:
<script type="text/javascript">
var exitsplashmessage = 'Please dont go!';
var exitsplashpage = 'http://www.site.com/exitpage/';
</script>
<script type="text/javascript" src="/exit.js"></script>
the problem is it loads it into an iframe, which isnt really what I want to do. I want to just have it redirect to the page which is defined with exitsplashpage;
Here is the exit.js code:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
function addClickEvent(a, i, func) {
if (typeof a[i].onclick != 'function') {
a[i].onclick = func;
}
}
var theDiv = '<div id="ExitSplashDiv" style="display:block; width:100%; height:100%; position:absolute; background:#FFFFFF; margin-top:0px; margin-left:0px;" align="center">';
theDiv = theDiv + '<iframe src="' + exitsplashpage + '" width="100%" height="100%" align="middle" frameborder="0"></iframe>';
theDiv = theDiv + '</div>';
theBody = document.body;
if (!theBody) {
theBody = document.getElementById("body");
if (!theBody) {
theBody = document.getElementsByTagName("body")[0];
}
}
var PreventExitSplash = false;
function DisplayExitSplash() {
if (PreventExitSplash == false) {
window.scrollTo(0, 0);
PreventExitSplash = true;
divtag = document.createElement("div");
divtag.setAttribute("id", "ExitSplashMainOuterLayer");
divtag.style.position = "absolute";
divtag.style.width = "100%";
divtag.style.height = "100%";
divtag.style.zIndex = "99";
divtag.style.left = "0px";
divtag.style.top = "0px";
divtag.innerHTML = theDiv;
theBody.innerHTML = "";
theBody.topMargin = "0px";
theBody.rightMargin = "0px";
theBody.bottomMargin = "0px";
theBody.leftMargin = "0px";
theBody.style.overflow = "hidden";
theBody.appendChild(divtag);
return exitsplashmessage;
}
}
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function () {
PreventExitSplash = true;
});
} else {
addClickEvent(a, i, function () {
PreventExitSplash = false;
});
}
}
disablelinksfunc = function () {
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function () {
PreventExitSplash = true;
});
} else {
addClickEvent(a, i, function () {
PreventExitSplash = false;
});
}
}
}
addLoadEvent(disablelinksfunc);
disableformsfunc = function () {
var f = document.getElementsByTagName('FORM');
for (var i = 0; i < f.length; i++) {
if (!f[i].onclick) {
f[i].onclick = function () {
PreventExitSplash = true;
}
} else if (!f[i].onsubmit) {
f[i].onsubmit = function () {
PreventExitSplash = true;
}
}
}
}
addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;

Replace DisplayExitSplash() function with this
function DisplayExitSplash() {
if (PreventExitSplash == false) {
window.scrollTo(0, 0);
PreventExitSplash = true;
divtag = document.createElement("div");
divtag.setAttribute("id", "ExitSplashMainOuterLayer");
divtag.style.position = "absolute";
divtag.style.width = "100%";
divtag.style.height = "100%";
divtag.style.zIndex = "99";
divtag.style.left = "0px";
divtag.style.top = "0px";
divtag.innerHTML = theDiv;
theBody.innerHTML = "";
theBody.topMargin = "0px";
theBody.rightMargin = "0px";
theBody.bottomMargin = "0px";
theBody.leftMargin = "0px";
theBody.style.overflow = "hidden";
theBody.appendChild(divtag);
window.location.href = exitsplashpage;
return exitsplashmessage;
}
}

Would this work?
function DisplayExitSplash() {
window.location = exitsplashpage;
}

You could re-define the DisplayExitSplash function:
<script type="text/javascript">
var exitsplashmessage = 'Please dont go!';
var exitsplashpage = 'http://www.site.com/exitpage/';
</script>
<script type="text/javascript" src="/exit.js"></script>
<script type="text/javascript">
DisplayExitSplash = function () {
window.location.href = exitsplashpage;
};
window.onbeforeunload = DisplayExitSplash;
</script>
JSFiddle exemplifying the concept:
http://jsfiddle.net/hFXPE/

Can two bookmarklets and a Greasemonkey script be combined into one bookmarklet? If so, how?

If this question is totally unsuitable, please forgive me. I don't know anything about programming. I should learn Javascript, I know, but it is a bit difficult for a total layman.
I have two bookmarklets and one userscript that, together, do what I need; but I need to click, wait, and click. Could they all be combined into a single bookmarklet? This is for Firefox 5, on Windows XP.
The first bookmarklet takes all links on a page that point to images and displays all these images in a single page in a new tab:
javascript:(function(){function%20I(u){var%20t=u.split('.'),e=t[t.length-1].toLowerCase();return%20{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function%20hE(s){return%20s.replace(/&/g,'&').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'"');}var%20q,h,i,z=open().document;z.write('<p>Images%20linked%20to%20by%20'+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+'%20('+hE(h)+')<br><img%20src="'+hE(h)+'">');}z.close();})()
Then the userscript kicks in, which changes the title of the page to include [Page loaded]:
// ==UserScript==
// #name Add "loaded" to title if page is loaded
// #namespace my
// #description Indicate if a page is loaded
// #include *
// ==/UserScript==
window.addEventListener(
'load',
function (e) {
document.title += " - [Page loaded]";
},
false);
Lastly, I click the second bookmarklet, which removes all text and all images smaller than a certain size from the page, and gives it a black background. It'd like this part to kick in only after all images have been loaded (hence the "loaded" title from the userscript).
I have to put this in in-line code, because the other methods seemed to fail (neither the code button nor blockquote did anything). It would be awesome if someone could help me out! I couldn't write a single line of Javascript myself and have no idea what to do.
function wrap(image, href) {
var img = document.createElement('img');
var div = document.createElement('div');
img.src = image.src;
var node = image.parentNode;
if (!href) {
div.appendChild(img);
} else {
var a = document.createElement('a');
a.href = href;
a.appendChild(img);
div.appendChild(a);
}
return div;
}
function findNext(document) {
var res = document.evaluate('//a[#rel='
next ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (res.singleNodeValue) {
return res.singleNodeValue.href;
} else {
return null;
}
}
if ('scrollMaxY' in window) {
function getScrollMaxY() {
return window.scrollMaxY;
}
} else {
function getScrollMaxY() {
return document.body.scrollHeight - window.innerHeight;
}
}
function streamify() {
var contentDiv = document.createElement('div');
var imageDiv = document.createElement('div');
var moreButton = document.createElement('input');
var style = document.createElement('style');
var iframe = document.createElement('iframe');
var errorSpan = document.createElement('span');
var retryButton = document.createElement('input');
var currentPageDiv = document.createElement('div');
var currentPageLink = document.createElement('a');
var nextUrl = findNext(document);
var occured = {};
var images = [];
var loadTimer = null;
var scrolledToBottom = false;
function extract(elem, href, images) {
switch (elem.localName) {
case 'a':
href = elem.href;
break;
case 'img':
if (!(elem.src in occured) && elem.offsetWidth > 250 && elem.offsetHeight > 300) {
images.push(wrap(elem));
occured[elem.src] = true;
}
}
var child = elem.firstElementChild;
while (child) {
extract(child, href, images);
child = child.nextElementSibling;
}
}
function loadNext() {
if (loadTimer !== null) {
window.clearTimeout(loadTimer);
}
if (nextUrl) {
loadTimer = window.setTimeout(function () {
errorSpan.style.display = '';
loadTimer = null;
}, 30000);
iframe.src = nextUrl;
}
}
style.type = 'text/css';
style.appendChild(document.createTextNode('body {background-color: black;color: white;}a {color: white;font-weight: bold;text-decoration: none;}a:hover {text-decoration: underline;}#greasemonkey-image-stream-content {text-align: center;}#greasemonkey-image-stream-content > div > div {margin-top: 2em;margin-bottom: 2em;}#greasemonkey-image-stream-content input {padding: 0.5em;font-weight: bold;}'));
contentDiv.id = 'greasemonkey-image-stream-content';
currentPageLink.appendChild(document.createTextNode('current page'));
currentPageLink.href = window.location.href;
currentPageDiv.appendChild(currentPageLink);
moreButton.type = 'button';
moreButton.value = 'More';
moreButton.disabled = true;
function handleMore() {
currentPageLink.href = iframe.src;
scrolledToBottom = false;
errorSpan.style.display = 'none';
moreButton.disabled = true;
for (var i = 0; i < images.length; ++i) {
imageDiv.appendChild(images[i]);
}
images = [];
loadNext();
}
moreButton.addEventListener('click', handleMore, false);
retryButton.type = 'button';
retryButton.value = 'Retry';
retryButton.addEventListener('click', function (event) {
loadNext();
errorSpan.style.display = 'none';
}, false);
errorSpan.style.fontWeight = 'bold';
errorSpan.style.color = 'red';
errorSpan.style.display = 'none';
errorSpan.appendChild(document.createTextNode(' Load Error '));
errorSpan.appendChild(retryButton);
iframe.style.width = '0px';
iframe.style.height = '0px';
iframe.style.visibility = 'hidden';
iframe.addEventListener('load', function (event) {
if (loadTimer !== null) {
window.clearTimeout(loadTimer);
}
errorSpan.style.display = 'none';
nextUrl = findNext(iframe.contentDocument);
extract(iframe.contentDocument.body, null, images);
if (images.length == 0 && nextUrl) {
loadNext();
moreButton.disabled = true;
} else {
moreButton.disabled = !nextUrl && images.length == 0;
if (scrolledToBottom && (nextUrl || images.length > 0)) {
handleMore();
}
}
}, false);
extract(document.body, null, images);
for (var i = 0; i < images.length; ++i) {
imageDiv.appendChild(images[i]);
}
images = [];
contentDiv.appendChild(style);
contentDiv.appendChild(currentPageDiv);
contentDiv.appendChild(imageDiv);
contentDiv.appendChild(moreButton);
contentDiv.appendChild(errorSpan);
contentDiv.appendChild(iframe);
var elem = document.documentElement.firstElementChild;
while (elem) {
switch (elem.localName) {
case 'head':
var child = elem.firstElementChild;
while (child) {
var next = child.nextElementSibling;
if (child.localName != 'title') {
elem.removeChild(child);
}
child = next;
}
break;
case 'body':
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}
elem = elem.nextElementSibling;
}
window.addEventListener('scroll', function (event) {
if (window.scrollY >= getScrollMaxY()) {
scrolledToBottom = true;
moreButton.click();
}
}, false);
document.body.appendChild(contentDiv);
loadNext();
}
streamify();
void(0)

(function(){
var a=Array.filter(document.getElementsByTagName('a'),function(e){
var h=e.href.split('.').pop().toLowerCase();
return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[h];
}),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
b.innerHTML='';
b.style.background='#000';
b.style.color='#ddd'
for(i;i<l;i++){
var t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
s.innerHTML=t;
p.src=t;
b.appendChild(p);
b.appendChild(s);
}
})()
Here it is compressed
javascript:(function(){var c=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0],b=0,g=c.length;a.innerHTML="";a.style.background="#000";a.style.color="#ddd";for(b;b<g;b++){var d=c[b].href,e=document.createElement("img"),f=document.createElement("div");f.innerHTML=d;e.src=d;a.appendChild(e);a.appendChild(f)}})();
One that waits for each image to load. Added error detection.
(function(){
var a=Array.filter(document.getElementsByTagName('a'),function(e){
return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[e.href.split('.').pop().toLowerCase()];
}),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
b.innerHTML='';
b.style.background='#000';
b.style.color='#ddd'
add(0);
function add(i){
var img=new Image(),t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
img.src=t;
img.onload=function(){
s.innerHTML=t;
p.src=t;
b.appendChild(p);
b.appendChild(s);
++i<a.length?add(i):'';
};
img.onerror=function(){
++i<a.length?add(i):'';
};
}
})()
And the minified version.
javascript:(function(){function d(b){var e=new Image,c=f[b].href,g=document.createElement("img"),h=document.createElement("div");e.src=c;e.onerror=function(){++b<f.length&&d(b)};e.onload=function(){h.innerHTML=c;g.src=c;a.appendChild(g);a.appendChild(h);++b<f.length&&d(b)}}var f=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0];a.innerHTML="";a.style.background="#000";a.style.color="#ddd";d(0)})();
Here is some test HTML
<a href='http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only-preview.png'>Firefox</a>
<a href='http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/ie-logo-small.png'>IE</a>
<a href='http://code.google.com/tv/images/chrome-logo.png'>Chrome</a>
I did not add limiter on size of images because I was not sure if it was necessary and I wasn't sure what size limit you wanted.

Javascript in asp .Net

I'm getting WebResource error in my asp.Net page:
var __pendingCallbacks = new Array();
Microsoft JScript runtime error: 'Array' is undefined
I have no idea what might cause this to happen. Isn't Array part of Javascript itself? Any help would be appreciated.
EDIT
The problem is that this isn't code that I wrote, it's built into the page structure in asp.Net.
EDIT
The problem only occurs in IE9 and only when run in IE9 mode (not compatibility)
Code:
(This is dynamically generated code, sorry for the length. Problem is about halfway down)
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {
this.eventTarget = eventTarget;
this.eventArgument = eventArgument;
this.validation = validation;
this.validationGroup = validationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options) {
var validationResult = true;
if (options.validation) {
if (typeof(Page_ClientValidate) == 'function') {
validationResult = Page_ClientValidate(options.validationGroup);
}
}
if (validationResult) {
if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {
theForm.action = options.actionUrl;
}
if (options.trackFocus) {
var lastFocus = theForm.elements["__LASTFOCUS"];
if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {
if (typeof(document.activeElement) == "undefined") {
lastFocus.value = options.eventTarget;
}
else {
var active = document.activeElement;
if ((typeof(active) != "undefined") && (active != null)) {
if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {
lastFocus.value = active.id;
}
else if (typeof(active.name) != "undefined") {
lastFocus.value = active.name;
}
}
}
}
}
}
if (options.clientSubmit) {
__doPostBack(options.eventTarget, options.eventArgument);
}
}
var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;
function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) {
var postData = __theFormPostData +
"__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
if (theForm["__EVENTVALIDATION"]) {
postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
}
var xmlRequest,e;
try {
xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
}
}
var setRequestHeaderMethodExists = true;
try {
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) {}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) {
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
xmlRequest.open("POST", theForm.action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xmlRequest.send(postData);
return;
}
callback.xmlRequest = new Object();
var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
var xmlRequestFrame = document.frames[callbackFrameID];
if (!xmlRequestFrame) {
xmlRequestFrame = document.createElement("IFRAME");
xmlRequestFrame.width = "1";
xmlRequestFrame.height = "1";
xmlRequestFrame.frameBorder = "0";
xmlRequestFrame.id = callbackFrameID;
xmlRequestFrame.name = callbackFrameID;
xmlRequestFrame.style.position = "absolute";
xmlRequestFrame.style.top = "-100px"
xmlRequestFrame.style.left = "-100px";
try {
if (callBackFrameUrl) {
xmlRequestFrame.src = callBackFrameUrl;
}
}
catch(e) {}
document.body.appendChild(xmlRequestFrame);
}
var interval = window.setInterval(function() {
xmlRequestFrame = document.frames[callbackFrameID];
if (xmlRequestFrame && xmlRequestFrame.document) {
window.clearInterval(interval);
xmlRequestFrame.document.write("");
xmlRequestFrame.document.close();
xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
xmlRequestFrame.document.close();
xmlRequestFrame.document.forms[0].action = theForm.action;
var count = __theFormPostCollection.length;
var element;
for (var i = 0; i < count; i++) {
element = __theFormPostCollection[i];
if (element) {
var fieldElement = xmlRequestFrame.document.createElement("INPUT");
fieldElement.type = "hidden";
fieldElement.name = element.name;
fieldElement.value = element.value;
xmlRequestFrame.document.forms[0].appendChild(fieldElement);
}
}
var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIdFieldElement.type = "hidden";
callbackIdFieldElement.name = "__CALLBACKID";
callbackIdFieldElement.value = eventTarget;
xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackParamFieldElement.type = "hidden";
callbackParamFieldElement.name = "__CALLBACKPARAM";
callbackParamFieldElement.value = eventArgument;
xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
if (theForm["__EVENTVALIDATION"]) {
var callbackValidationFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackValidationFieldElement.type = "hidden";
callbackValidationFieldElement.name = "__EVENTVALIDATION";
callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;
xmlRequestFrame.document.forms[0].appendChild(callbackValidationFieldElement);
}
var callbackIndexFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIndexFieldElement.type = "hidden";
callbackIndexFieldElement.name = "__CALLBACKINDEX";
callbackIndexFieldElement.value = callbackIndex;
xmlRequestFrame.document.forms[0].appendChild(callbackIndexFieldElement);
xmlRequestFrame.document.forms[0].submit();
}
}, 10);
}

This happens because we have this setup
<collapsible panel>
<iframe>
<script>
</script>
</iframe>
</collapsible panel>
When the page loads, the panel being shown forces the script inside the iframe to be dragged through the DOM before the javascript libraries are loaded. This seems to be a change in that was made for IE9. I have yet to fine a way around this issue but at least I know the cause. A temporary workaround is to force the compatibility of the page to IE8 using a meta tag in case anybody else runs into this issue.

The problem was fixed when I removed the SRC attribute from the iframe and I added onOpen event to jQuery's dialog:
open: function(){
document.getElementById("iframename").src = "page.aspx";
}