I need to pass the url where the javascript is at the moment instead of using the url in the textbox.
Currently I have textbox and a button, I am getting the url from the textbox and then using it in the javascript. I want only to press the button and the script to get automatically the page where the code is. For example, if I have the code at http://www.mypage.com, I want when I’ll click the button the javascript to get the url automatically and play with it.
Here is the complete code I am using:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="External/base64.js"></script>
<script type="text/javascript" src="External/canvas2image.js"></script>
<script type="text/javascript" src="External/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="build/html2canvas.js?221"></script>
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript" src="http://www.hertzen.com/js/ganalytics-heatmap.js"></script>
<script type="text/javascript">
var date = new Date();
var message,
timeoutTimer,
timer;
var proxyUrl = "http://html2canvas.appspot.com";
function addRow(table, field, val) {
var tr = $('<tr />').appendTo($(table));
tr.append($('<td />').css('font-weight', 'bold').text(field)).append($('<td />').text(val));
}
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
message.fadeOut(function () {
message.remove();
});
}, duration || 2000);
$(message).remove();
message = $('<div />').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
$(function () {
$('ul li a').click(function (e) {
e.preventDefault();
$('#url').val(this.href);
$('button').click();
})
var iframe, d;
$('input[type="button"]').click(function () {
$(iframe.contentWindow).unbind('load');
$(iframe).contents().find('body').html2canvas({
canvasHeight: d.body.scrollHeight,
canvasWidth: d.body.scrollWidth,
logging: true
});
});
$('button').click(function () {
$(this).prop('disabled', true);
var url = $('#url').val();
$('#content').append($('<img />').attr('src', 'loading.gif').css('margin-top', 40));
var urlParts = document.createElement('a');
urlParts.href = url;
$.ajax({
data: {
xhr2: false,
url: urlParts.href
},
url: proxyUrl,
dataType: "jsonp",
success: function (html) {
iframe = document.createElement('iframe');
$(iframe).css({
'visibility': 'hidden'
}).width($(window).width()).height($(window).height());
$('#content').append(iframe);
d = iframe.contentWindow.document;
d.open();
$(iframe.contentWindow).load(function () {
timer = date.getTime();
$(iframe).contents().find('body').html2canvas({
canvasHeight: d.body.scrollHeight,
canvasWidth: d.body.scrollWidth,
logging: true,
proxyUrl: proxyUrl,
logger: function (msg) {
$('#logger').val(function (e, i) {
return i + "\n" + msg;
});
},
ready: function (renderer) {
$('button').prop('disabled', false);
$("#content").empty();
var finishTime = new Date();
var table = $('<table />');
$('#content')
.append('<h2>Screenshot</h2>')
.append(renderer.canvas)
.append(table);
Canvas2Image.saveAsJPEG(renderer.canvas);
}
});
});
$('base').attr('href', urlParts.protocol + "//" + urlParts.hostname + "/");
html = html.replace("<head>", "<head><base href='" + urlParts.protocol + "//" + urlParts.hostname + "/' />");
if ($("#disablejs").prop('checked')) {
html = html.replace(/\<script/gi, "<!--<script");
html = html.replace(/\<\/script\>/gi, "<\/script>-->");
}
// console.log(html);
d.write(html);
d.close();
}
});
});
});
</script>
<base />
</head>
<body>
<div style="float:left;width:500px;">
<label for="url">Website URL:</label>
<input type="url" id="url" value="http://www.google.com" /><button>Get screenshot!</button>
<!-- <input type="button" value="Try anyway" />--><br />
</div>
<div style="clear:both;"></div>
<div id="content"></div>
</body>
</html>
Thanks in advance, Laziale
To pass the current URL as a parameter, you should be able to use any of the following ways to get the current URL:
document.URLwindow.locationwindow.location.hrefTo use the current URL as opposed to the textbox value, change the following in your
$('button').click()event:to: