javascript pass current url as parameter instead of data from textbox

Question

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 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

Rion Williams · Accepted Answer · 2011-08-10 17:54:00Z

3

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.URL
window.location
window.location.href

To use the current URL as opposed to the textbox value, change the following in your $('button').click() event:

var url = $('#url').val();

to:

var url = document.URL; //or any of the other suggestions

edited Aug 10, 2011 at 17:54

answered Aug 10, 2011 at 17:48

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rion Williams Over a year ago

Thanks - added those in there.

Collectives™ on Stack Overflow

javascript pass current url as parameter instead of data from textbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related