Web link: replace current browser tab vs. open new tab

I’ve seen (on other web pages) that some web links replace the current page, while others open an entirely new tab (or browser instance).

The latter is especially handy for reference material existing outside of Anvil, as the Anvil app user then does not lose their place in the app, when the target page is opened.

How do we tell Anvil which kind of link we want to display?

P.S.: Keep up the great work!:smiley:

As far as I can tell you need to do this in HTML

<a href="http://www.example.com" target="_blank">Click me</a>

Fiddle here; try removing the target and you’ll see it will stay on the same page :

http://jsfiddle.net/6vo9sL8t/

(the target being the key) but I can’t see a way to specify the target in Anvil.

Worth noting as well that it does depend on browser settings to work (I believe it can be overridden).

By default, all URLs visited from Anvil Link components will open in a new tab. (We use precisely the target="_blank" mechanism described by @david.wylie above). Because Anvil apps are rich single-page applications, users almost never want to “replace” the app with a link to an external site. And links to internal pages are taken care of by handling the Link's click event.

That said, we may be persuaded to add a target property to Link components at some point if the need arises. Paying users can, of course, use custom HTML in the meantime if need be.

1 Like

While users wouldn’t want to replace the url to an external site how do you then propose implementing the navigation described here?

As in, how can then users of the site capture the url to bookmark it or revisit it or send it as: https://myapp#my_link

Is there a way to set it dynamically?

1 Like

Welcome, szilvesztercsab!

I think this demo might be what you’re looking for:

I haven’t looked at the code to see how complicated it is yet.

2 Likes

The demo’s good in that it does update the window url when the link is clicked (eg: https://monstrous-flawless-manatee.anvil.app/#ContentForm3) but the links don’t have their url attribute set, so one can’t just “Copy Link Address” from them, so maybe the only way to do that as suggested before would be to create a custom Link component via some custom HTML Form like so:

<a href="#ContentForm1" target="_self">CONTENT FORM 1</a>

Also this component then would need to “export” some properies like url, text, whatever for it to be customizable… right?


Or could one just subclass Link to achieve this somehow? Any other more pythonic way? :slight_smile:



EDIT: did it with custom jquery and html here: https://anvil.works/build#clone:2GEBEELYS67Z46XA=7GFVNRQIF6C4T7KZHPXNP6BI

3 Likes

One solution is to import anvil.js and then in your init do anvil.js.get_dom_node(self.link_1).target=“_self”

1 Like