DIV changing onclick with external page as a variable

Issue

I have this code that is changing the content of the DIV based on an external page:

<a href="" onclick="return false" onmousedown="loadexteranlPage() "> external page</a>

and

function loadexternalPage() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = 
xmlhttp.responseText;
}}
xmlhttp.open("GET", "externalpage.html", true);
xmlhttp.send();
}

How can I update this code in the way the function get a variable as an external page instead? something like this??

<a href="" onclick="return false" onmousedown="loadexteranlPage(externalpage) ">  Link to external page</a>

function loadexternalPage(externalpage) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
} }
xmlhttp.open("GET", externalpage, true);
xmlhttp.send();
}

or with method:

$(document).ready(function () {
loadxtPage("popup.html"); 
$("#main_frame").click(loadxtPage("externalpage.html"));
})

Solution

You can use the href attribute:

Pass the event here:

<a href="externalpage.html" onclick="return false" onmousedown="loadexteranlPage(event) ">  Link to external page</a>

Use the events' attribute to get the URL:

function loadexternalPage(event) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", event.target.href, true);
    xmlhttp.send();
}

This is one possible solution. It really depends on where you need to specify the URL.

Answered By - STT