I have a small single page application with a few internal links and a few external links. I want all of the external links to automatically open in a new tab and so I have set the html as follows:
<base target="_blank" />
This works great in chrome. When I click links on my navbar, my site navigates within the same tab, and when I click on an external link it dutifully opens in a new tab.
However, when I visit my website with firefox (several versions tested), every single link, even the internal ones on my navbar, opens in a new tab.
How can I correct this so that only external links open in new tabs on all browsers?
Thanks
The static solution would be to be explicit on internal links, that is, adding target="_self" to those.
If you don't want that, Javascript might also be able to help, depending on your setup.
Assuming your internal links are all relative or at least server-absolute links, and assuming your page is static (like links are not added to the page after DOMContentLoaded), the following Javascript snippet would solve the task:
document.addEventListener('DOMContentLoaded', () => {
for (const externalLink of document.querySelectorAll('a[href^=http]'))
externalLink.target = '_blank';
})
Google
Some internal link
As another dude has pointed out, of course this only works if your links are accessible from the document (not if they reside inside a shadowDOM).
As per #connexo's comment, I solved the issue by explicitly stating
target="_self"
in the navbar links.
You need to set the target specifically for external links, if you want to override browser default functionality. Make a link component that does this.
Related
There are three pages in my sites.google.com named (index.html, data.html, test.html). I created the three files using "Full Page Embed" option in Pages section. I am having issue with adding hyperlink of data.html inside index.html
I tried
Data
Data
while trying the above ways, a link automatically adding up like https://2004xxxxxx-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d2xxxxxxxxxxx/data.html and giving 404 error while accessing it.
I also used the direct link Data but many browsers blocking it, saying its external
Anyway to add hyperlink to the page inside the pages through embedded code itself
I am able to use target="_blank" which opening the links in new tabs but is there a way to show in the same tab (I used target="_self" but it blocking)
It sounds like Google is using frames that live in a completely different context for this full page embed feature. Since that is the case, I think you need to use absolute URLs to link to the other pages on your site from that location:
<a target=_top href="https://example.com/data.html">Data</a>
The target=_top makes the link apply to the whole window, not just in the frame.
so I have a web page I've been working on that uses embedded Google Docs in an iFrame to keep it updated without having to hard code notices/updates.
I came across a problem, where if you were to click on a link it opens in the iframe instead of opening in a new tab, which is preferable. I've tried things like:
<base target="_blank" />
Any ideas on how to accomplish this? (Note that with Google docs I can't find a way to change the way links are handled, so I'd need to do that on the end of the main page.)
I'm writing some documentation using GitHub's built in wiki (using Markdown syntax).
The problem I have had with anchor tags is that once I have clicked that anchor once, manually scrolled down to it again, and try to click it, it won't work anymore.
a) The place where the anchor links jump to.
##<a name="listofactions">List of Actions</a>
b) An example of an anchor link
[Back to List of Actions](#listofactions)
I also tried html in markdown syntax
Back to List of Actions
And even tried linking to the full url with the # and anchor appended.
Back to List of Actions
They all work, but when I manually scroll down to the anchor link again and click it, it doesn't bring me back to (a) anymore. Unless I click on a different anchor link.
How can I write it such that the anchor links can work regardless?
There is nothing wrong with your Markdown. This is simply how browsers work. The first time you clink the link (when viewing the same page), the URL in the address bar of your browser changes from http://example.com/path/to/your/page to http://example.com/path/to/your/page#someanchor. As that is a different URL, the browser will navigate to the new URL by scrolling to the appropriate position on the page. However, as you read the page and scroll to a different position, the URL remains the same. Finally, the second time you click the link,the URL is already http://example.com/path/to/your/page#someanchor so there is no change in the URL and as far as the browser is concerned, you are already there so no navigation happens and the page does not scroll.
There may be some JavaScript tricks you can use to trick the browser into behaving as you want, but those won't work on GitHub as they won't let you include any JavaScript in your pages for security reasons.
What you could do as a workaround (assuming you have a long page and want to easily find the specific location again) is first click the [back] button (taking you back to http://example.com/path/to/your/page) in your browser's navigation bar and then click the [forward] button (returning you to http://example.com/path/to/your/page#someanchor) which should trigger the browser to navigate to the location and scroll the page.
Try this:
...
<a name="listofactions"></a>
## List of actions
Mind the blank line between the HTML tag and the markdown markup.
Then call it via [link-to-anchor](#listofactions)
Should work.
Hope to have helped!
Add the attribute target="_self"
I am working on a project using socket.io. I want to give user some links to download a file as
<a href="<path>" >Link Name</a>
When I click on link to download file, my socket gets disconnected.
When I use this
Link Name
it works fine. Any reason why this happens?
When you follow a link within the same window, the current page's environment gets completely torn down, including the entire JavaScript environment in which your code (and socket.io's code) is running. That's why it does this when you click a link to a new page within the current window, but not when you open a new window (target="_blank").
You'll want to look at the various single-page-application techniques, which mostly involve swapping content into the current page using ajax (and updating the hash so the URL is different) without loading an entirely new page into the window.
You can try to target downloads to a hidden iframe. This would prevent page reloading:
<iframe id="downloadIframe" name="downloadIframe" style="display:none;"></iframe>
Link Name
We specify id as well as name for iframe for cross-browser behavior.
I am working on a WordPress site that has a lot of authors. The stories often contain external links, and I am looking for a way that we can automatically have external links open with a small header that has a "Back to our site" link, along with a close button.
Ideally this would be done automatically, but we'd also like to be able to create links manually that open in this same sort of iframe with our header. How can I go about setting this up?
I suggest you build this via Javascript, so you could easily turn it off/on as needed and it will be kind of portable too and you can use it on other site as well.
steps to do:
Go through all the anchor links and if the href is external link, add attribute target blank, and change the href links
if(external_link){
a.target = '_blank';
a.href="http://example-ownsite.com/iframe_holder/?page=" + a.href;
}
Then take a look at my page on http://fedmich.com/works/odesk/
so you could provide a vertical scrollbar on the iframed page.
Im using a function called resizeIframe() there
Note: some sites dont want to be placed inside iframe and they will breakaway from the topframe.