某些用户操作更改了链接href后，从Chrome到桌面的拖放链接无法创建正确的桌面快捷方式

Question

In my application I have a link to some other web page. A user can drag that link to his desktop and create a shortcut for that page. The thing is, that after some things happen at runtime, I want THIS SAME element to point to a different web page. Changing the href of the element works as it should: after it is changed the link can be clicked and the correct new page is opened. But, the drag&drop to desktop functionality does not work fine with Chrome:

Case 1: Default browser is IE, the new link is dropped to desktop, double click on the desktop shortcut opens it in IE -> the correct new page is opened.

Case 2(the problem): Default browser is Chrome, the new link is dropped to desktop, double click on the desktop shortcut opens it in Chrome BUT it is the old page, like the url was never changed..

I tried a simple test where the href changes on button click and it happens there too:

<input type="button" id="button" value="Change url" />
<span>
    <a id="theLink" href="http://www.w3schools.com">link</a>
</span>

var onClick = function() {
     $("#theLink").attr("href", "http://www.w3schools.com/jquery");
};

$('#button').click(onClick);

Can be tried here: http://jsfiddle.net/cealyx/pazdj9kd/4/

It works fine with IE. Doesn't work when default browser is Chrome or Mozilla. OS: Windows 8.1 Used jQuery 2.0.3.

When I open the properties of the shortcut: In the "Web Document" tab the URL is not the correct new one. However in "Details tab" the URL is correct, so it managed to update to some point.....

Have someone run into this issue before and are there solutions? Some explanation why this is happening should be nice too. Thanks

Answer 1

I found the link text must also be changed for it to be recognized as a different link with a different URL, when dragged to the desktop. As even having 2 links with the same text and switching between one being hidden and one being visible, strangely enough, did not work. But if you change text slightly in addition to the URL , I am finding that to work in Chrome 45.

<a id='mylink' href='http://google.com'>Google</a>

$('#mylink').prop('href', 'http://booble.com').html('Google~') //Works
$('#mylink').prop('href', 'http://booble.com') //Does not work
$('#mylink').prop('href', 'http://booble.com').html('Google') //Does not work