Button->template-node->link to another site

[stgj]

Pulling my hair out here, help appreciated.

I have a Node-red with a dashboard site.
The url used here is not real, but it has the same structure.

Site: http://weather.com:1880/ui

In this site I wish to have a button that triggers a site change:
http://weather.com:9000

The button triggers a template node (the blue one, not the orange one).
I am not able to make the site swap to work. So I am doing some tests.
Sending the url to a debug node also.

Test 1:

<script>
  (function(scope) {
    scope.$watch('msg.payload', function(data) {
      let origin = window.location.origin
      scope.send({url: origin})
      window.location.href = origin
    });
})(scope);
</script>

Result in degub:
url: "http://weather.com:1880"
And user is sent to the Node-red editor. This is not what I want.
So lets try hostname.

Test 2

<script>
  (function(scope) {
    scope.$watch('msg.payload', function(data) {
      let hostname = window.location.hostname
      scope.send({url: hostname})
      window.location.href = hostname
    });
})(scope);
</script>

Result in debug:
url: "weather.com"
But user is sent to "weather.com:1880/ui/weather.com"
With error info: Cannot GET /ui/weather.com

What is happening?

Best regards
Steffen

[zenofmud]

Can you export your flow ad paste it in a responce.

[stgj]

It looks like I fixed it.

This is apparently not viable:

const url = window.location.hostname
window.location.href = url

The difference between hostname and origin is that origin have the protocol (http:) at first, hostname has not.
When you link it to another site without the protocol it appends the url at the end of the same url.
So you get someurl.com/someurl.com

The problem with origin is that you also get the TCP port (eg :6000).
This I did not want since I wanted to link to another site with another port.

Solution was:

const hostname = window.location.hostname
const protocol = window.location.protocol
const url = `${protocol}//${hostname}:6000`
window.location.href = url

Since you use http:// it interprets it as a completely new site and not a path.
I believe.

If you want the browser to open a new site use:

window.open(`${protocol}//${hostname}:6000`, `_blank')

Also when using a button to trigger the linking in the template node, remember to do an if check (like a string sent from the button) in the script before sending the user to another side. Before window.open(some site)
If you dont, the javascript will execute the moment the user opens the site.

Hope this was clear.

Best regards
Steffen