Open AJAX link in new window or tab - javascript

I have a page with links that load new content into one of the divs. This work fine, but I would also like to give the user the option to open those links in a new tab if they right-click and choose to 'open in new tab'.
So, the javascript AJAX would handle the loading of the new content normally, but then if they select 'open in new tab' perhaps the main HREF would fire and bring the user to the full page with content in the other tab. Something like:
Click me
<script>
function loadContentOnly(n) {
event.preventDefault(); //Some condition here?
// AJAX load content for n...
};
</script>
How is this best achieved? (I'm using jQuery, but a vanilla solution even better!)

Not really clear if determination to show in new page is global or not.
Following assumes it is predetermined
Click me
<script>
function loadContent(n, el) {
if(showInNewPage){
el.target = '_blank';
return true;
} else{
// AJAX load content for n...
return false;
};
</script>

Related

Javascript to reload a new tab page

window.open("http://google.com", '_blank');
var childWindow = "http://google.com";
childWindow.location.href = "http://google.com";
I have an eventAddListener that loads http://google.com on a new tab with a button press, but right after it opens the new tab of google.com, I want it to REFRESH again. NOT my base page but the NEW tab page, by itself. The code I showed is just one of the examples out of 5 pages worth of google search which don't work.
UPDATE:
var win = window.open('google.com', 'New Window'); setTimeout(function () { var win = window.open('google.com', 'New Window'); },3000);
This is the best i could come up with. It opens new tab and "Reloads" the new tab rather than refresh it.
What I want is for example, you click on new tab, you paste a link then press enter, which EXECUTES the link. I basically want a javascript function which EXECUTES the link.
You can't do this.
In order to trigger a reload in the new tab/window you need to run JS in that tab/window.
The same origin policy prevents this.
If you had control over the new page then you could have an event listener running in it and post a message asking that listener to trigger a refresh.
Obviously you can't do that with Google's page.
This question, however, reads like an XY problem. If the goal is to display fresh (and not old, cached, out of date) information and the target page is not a third party one then you shouldn't be using JS to hack your way around caching. Instead set better caching rules on the target page in the first place.
I worked on something similar in the past few weeks and the code below worked for me.
index.html
<button onclick="openTab()">New Tab</button>
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this refreshes that new tab
newTab.location.reload();
}
</script>
Just to prove that this works on the new tab I used the code
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this will alert in the new tab
newTab.alert("New Tab");
//before the following reload code takes effect
//this refreshes that new tab
newTab.location.reload();
}
</script>
Hopefully that's what you are looking for.
From my understanding you want the new tab to refresh once opened with JavaScript instead of the current tab where you run the JavaScript code from.
That's not directly possible. The JavaScript code will only run for the tab it was executed in. The newly opened tab does not know that JavaScript code should be running. The current tab cannot pass over instructions for the new tab to execute.
However, you can select the newly opened tab manually first and then execute Javascript code to refresh the page. But that probably defeats the purpose of what you're trying to do.

Enable "open in new tab/window" in right click

My links are javascript functions which show a loader, then navigate to the target link:
<script>
function go(url) {
document.body.innerHTML = "some loader html";
window.location = url;
}
</script>
Click here
However this link wouldn't work when the user right clicks it and wants to navigate to test.php in a new tab.
I want the link also to function when the user wants to open it in a new tab/window. Is there a javascript/jquery way I can achieve this?
Thanks
Your links should be links, not JavaScript functions. Their primary purpose is navigation. You can add the extra behavior later, in a click handler:
document.body.addEventListener('click', evt => {
const link = evt.target.closest('a.use-loader');
if (!link) return;
evt.preventDefault();
document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
window.location.href = link.href;
});
<a href="https://example.com" class="use-loader">
This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
This one, too.
Or with jQuery:
$('body').on('click', 'a.use-loader', function () {
document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
window.location.href = $(this).attr('href');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com" class="use-loader">
This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
This one, too.
This way, the links still work for any agent that isn't running JavaScript, including browsers opening new tabs and users running NoScript.
Firstly, "My links are javascript functions which show a loader, then navigate to the target link" sounds like bad design decision.
To answer your question...
window.open('test.php', '_blank');
the second parameter will be the name of the target window
see How to simulate target="_blank" in JavaScript
The only way to get a right click 'open in a new window' is to have your tag like this
Click here
I highly recommend that you do not open the link using javascript, this is usally bad practice and you will most likely run into popup blocker issues.
I would do this personally
Click here
Maybe this "loader" you want to show is supposed to imitate an AJAX loading approach where you load new HTML and insert it into your page without causing an actual page reload
you might be interested in this
How do I load the ajax data into a div with jquery?

How do you create a link which when clicked takes you to a page and also opens a new tab going to another url?

I want to have a link which when clicked preforms two actions:
redirects the current tab of the browser to url A.
opens a new tab directing the browser to url B
How can I do this? Is there HTML for this? Should I use javascript?
You would need to use javascript to achieve this, something along the lines of this:
$('#foo').click(function(e) {
e.preventDefault(); // stop the normal link behaviour so you can open a new window
window.open('http://foo.com/new-page'); // open new tab
window.location.assign($(this).prop('href')); // go to new page in current tab
});
Without jQuery
link // add onclick event
<script>
function f(){
document.location='/a.html'; // open in same tab
window.open('/b.html','_blank'); // open new tab
}
</script>

How to make a link not to "Open in new window"

When we click with right mouse button on a any site link, there's a dropdown menu. One of the options here is "Open in new window". For some reasons, I need to disable this possibility for all site links. Is it possible?
Thanks in advance.
UPDATE
The reason for doing this
The site menu has 2 types of menu items: ordinary links to pages and fake links, that cause popup window with certain information. I have a jquery function, that shows this popup and returns false for the link. And when a user "Open in new window" some of fake links, page reloads, but popup does not appear. And the user is looking at the empty page. That's not good I think :)
No, not in all browsers, probably not in any browser. You can't change it's GUI without the specific browser giving you access to it, as the browser GUI isn't a standard in any way.
And why would you like to do that anyway?
You can use javascript to change the url and add the action on click so when the user try to open it in new windows nothing happens
As far as I know you cant disable this option since its provided by the web browser itself and each one implements the feature differently. You can however check the referrer value in the HTTP headers and ensure that its a correct value. When a user opens a new window the referrer should be set to null allowing you to intervene.
I would also hope that you consider not implementing this because some browsers have inconsistent behavior or an appliance on the network might remove the header information which would leave people unable to use your site.
If you are using javascript, you might as well make clicking links execute a javascript method. That way opening it up in a new page does nothing.
Remove the HREF attribute from the tag, but apply CSS styling to make it look like a link in all browsers. Then use a Javascript onclick function to do what it is you want to do. Easy. Case in point: look at the "add comment" link / button on this very page. If you right-click on it, you notice that there is no "Open in new Window" option :)
that ain't good for website reference, but if you REALLY need to block access from new windows...
How about generating your page content with Ajax?
something like that:
HTML
JAVASCRIPT
function xmlhttp() {
var x;
try {
x = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
try {
x = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
x = new XMLHttpRequest();
} catch (e) {
x = false;
}
}
}
return x;
}
function page(idMenu) {
var http = xmlhttp();
if (!http) {
alert('XmlHttpRequest non supporté');
} else {
var url = 'pageOutput.php?pageNo=' + idMenu;
http.open('GET', url, true);
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
document.getElementById('pageContent').innerHTML = http.responseText;
}
}
http.send();
}
}
now all you have left to do is create a PHP where you check whatever menu ID is called and echo page content according to $_GET['pageNo']. if you already got your pages on many PHP/HTML you may also just do include and echo them...
if(isset($_GET['pageNo'])){
//echo page code here according to $_GET['pageNo'] value
}else{
//echo main page
}
EDIT: You may also add URL param to refer the current page so the user can reload your page from a new window without having no params loaded...
disable right click should do it...
http://www.billybear4kids.com/clipart/riteclic.htm
UPDATE
It's possible to disable context menu on any element we want:
$('selector').contextmenu( function() {
return false;
});
To disable context menu on the page completely, we can use the following:
$('*').contextmenu( function() {
return false;
});
OLD ANSWER
OK, guys, if we can't change browsers specific features, then we have to think of some other way. As for me, the most suitable idea has been suggested by Quentin. So I wrote a little jquery script to replace all links, that I need to be fake, with span elements.
// transform links with .fake class only
$('.nav >li > a.fake').each(function () {
// save all necessary link information
var href = $(this).attr('href');
var text = $(this).html();
// add fake span
$(this).after('<span>'+text+'</span>');
// save new span into a variable and after this we can remove the link
var mySpan = $(this).siblings('span');
$(this).remove();
// emulate link default behaviour
mySpan.click(function () {
window.location.href = href;
});
});

Detaching/opening an iframe into a new window

I have an iframe setup within a page and basically want to know whether it's possible to have a button in this iframe and when pressed, opens the iframe into a new browser window, showing the contents of the iframe.
I am planning on using either JavaScript or jQuery to achieve this. I am using IE6.
$('.button').click( function(){
window.open($('iframe').attr('src'),'mywindow','width=400,height=200');
});
For what you need (to open the same page where this button), no matter if it's an iframe or if in the home page.
The only difference is if you want that data to open in new window, are a reflection of the same page, such as data that can be an input.
If you care about who are the same data:
$("#mybuttonOpenWin").click(function(){
window.open(window.location.href);
});
If you are interested, you can try this code:
$("#mybuttonOpenWin").click(function(){
var mref = window.open(window.location.href);
(function = onReadyRef(xref){
if(xref.window.document.readyState=="complete"){
$(xref.window.document).find("body").html($("body").html());
}
else{
onReadyRef.call(this, xref);
}
})(mref);
});

Categories