Change HTML page's url & its content

Question

I am trying to change the content of an html page when some action on the widget is taken.

Code:

function widget(newURL) {
    var server_url = "127.0.0.1:8000";
    var oldHTML = document.documentElement.innerHTML;

    $.post(server_url + "/convert/",
    { input_html: oldHTML, convert: newURL },
    function(response) {
        var resp = JSON.stringify(response);
        resp = resp.substring(1, resp.length - 1);

        var jObj = JSON.parse(resp);
        var win = window.open(newURL,'_self');
        document.write(jObj.data);
    });        
}

With this code, though the HTML content gets changed but the HTML page's URL doesnot change. Can someone please suggest how can i change webpage URL as well as content both ?

Updated Code:

function widget(newURL) {
    var server_url = "127.0.0.1:8000";
    var oldHTML = document.documentElement.innerHTML;

    $.post(server_url + "/convert/",
    { input_html: oldHTML, convert: newURL },
    function(response) {
        var resp = JSON.stringify(response);
        resp = resp.substring(1, resp.length - 1);

        var jObj = JSON.parse(resp);
        window.history.pushState({"html":jObj.data},"", newURL);
        document.documentElement.innerHTML = jObj.data;
    });
}

In the updated Code, the URL changes as well as the content. Thanks,

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Try window.history :

window.history.pushState({"html":jObj.data,"pageTitle":'Hello'},"", newURL);      
document.documentElement.innerHTML = jObj.data;

Take a look at this answer.

hope this helps.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 28 '16 at 11:48

Zakaria Acharki

66,747
15
75
101

window.history.pushState({"html":jObj.data,"pageTitle":'Hello'},"", newURL); document.documentElement.innerHTML = jObj.data; – Naveen Jan 28 '16 at 11:59
Thanks. Tried this code. This changes the URL of the page & the content. But If i refresh the page, the content is changed to Blank(though the URL is still the new one). Is there a way to retain the original content even on refreshing the page ? – Naveen Jan 28 '16 at 12:09
You're welcome, glad i could help, i don't think that is possible since you get the content dynamically and it's not related directly with the page. – Zakaria Acharki Jan 28 '16 at 12:24
But there should be some way to make this change. For ex: if the widget is for Language translation. And the widget language is changed. Then on first time, the URL & content both are changed fine. Then on refreshing the page too, the content should still be retained(as the url still remains the same). Any other way ? – Naveen Jan 28 '16 at 12:38
For the first time it can be done using client-side language, but after the refresh the browser will search the page in server and get it so you have to use some server-side language to make change in server side then return page with new source. – Zakaria Acharki Jan 28 '16 at 13:00
Okay. Just one more thing. Why is the new HTML Page UI not exactly same ? Just string replacements are done in the original source. Any idea ? – Naveen Jan 28 '16 at 13:03
The majority of ui components need an initiation via js so if they're created dynamically you should call init function of everyone of them after creation. – Zakaria Acharki Jan 28 '16 at 14:59

Change HTML page's url & its content

1 Answers1