I have some hidden divs in a HTML page with specific IDs:
<div id='log1' style='visibility: hidden;display: none;'>content</div>
<div id='log2' style='visibility: hidden;display: none;'>content</div>
And then some links:
<a href='?' target='_blank'>Log 1</a>
<a href='?' target='_blank'>Log 2</a>
I want the browser to open a new page / tab (or even a popup but this might be bad if the user has popup blockers) with the contents of the corresponding div.
I know I could do some Javascript to create a floating div and show the data in the same page, but I'd like to avoid that. Moreover, if there is a way of doing what I ask without JS (which I doubt) even better.
You can't do a popup based on hidden divs in your HTML without using JavaScript, no. There's a CSS trick where if you put the divs far off the page and give them an ID, then link to that as an anchor, the browser will scroll it into view.
On the JavaScript side, it's fairly straightforward. First, add a data-log attribute to them to tell us what log we should show, then:
var links = document.querySelectorAll("...some selectors for your links...");
Array.prototype.forEach.call(links, function(link) {
link.onclick = function() {
var log = document.getElementById(this.getAttribute("data-log"));
var wnd = window.open("", "_blank");
wnd.document.write(
"<!doctype html>" +
"<html><head>" +
"<meta charset='appropriate charset here'>" +
"<title>Title here</title>" +
"</head><body>" +
"<div>" + log.innerHTML + "</div>" +
"</body></html>"
);
wnd.document.close();
return false; // Prevents the default action of following the link
};
});
Note the window.open must be done within the click handler; most popup blockers will allow the popup if it's in direct response to a user action.
window.open returns a reference to the window, and then we can write to its document.
(I don't normally use onclick handlers, but you didn't mention using any library and there's still a lot of IE8 out there. Using onclick lets us use return false to prevent the default; details in this small article on my anemic little blog.)
var newWindow = window.open("about:blank", "", "_blank");
newWindow.document.write(html);
In this case you should be doing this using javascript within a call back it could be on page load or on button click or something else
Related
I wanted to make the tag open two URLs at the same time. This is what I tried:
Only HTML
text
This did work but not the way I wanted it to. It would open the URL2 when clicked on it and if opened in a new tab with right click or the mouse wheel it would open URL1. I want it to open both pages in new tabs at the same time.
HTML + JavaScript
HTML:
<a id="myId">text</a>
JS:
myId.onclick = function(){
open('https://www.example1.com');
location.href = ('https://www.example2.com');
}
This didn't work at all.
This is Your code :
myId.onclick = function(){
open('https://www.example1.com');
location.href = ('https://www.example2.com',,'_blank');
}
Change the code to:
myId.onclick = function(){
window.open('https://www.example1.com','_blank'); //just use window.open() for both the cases;
window.open('https://www.example2.com','_blank');
}
Hope, you have got the solution for your problem.
As per your requirement, I would suggest following.
Also look at the fiddle HERE
Open Two URLs
var myId = document.getElementById("myId");
myId.onclick=function(){
window.open("https://www.google.com","_blank");
window.open("https://www.microsoft.com","_blank");
}
You should be allowing your browser's POPUP BLOCKER to allow opening multiple pages/tabs for this to work.
Try using an onclick function that uses window.open to open the two URLs:
document.querySelector("#foo").onclick = function () {
window.open("https://www.example.com", "_blank");
window.open("https://www.example.com", "_blank");
};
<a id="foo">bar</a>
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?
I have a question about the new tab for the link.
Is there anyway I can set the browser tab title before user clicks a link? It seems like there is no way to debate the title for the new tab if the html contained in the new tab doesn't have title attribute. Am I right? How do I set the title?
//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
As you have it, this is not possible because your links are just normal HTML links. When the new page opens in a new tab, the current page will not have any reference to it and so cannot change it in any way. You will need to open the page using javascript and set the title that way.
You can dynamically set this up in window onload to find all a tags and add a click event whihc opens the window and sets the title.
If you want different titles for each page, you can store this in a data- attribute in the a tag.
Note tho that this will only work with pages in the same domain (for security), and that it does not handle people right clicking and pressing "Open in New Window". Middle click in Windows does seem to work however.
HTML
open me
JavaScript
window.addEventListener("load", function() {
// does the actual opening
function openWindow(event) {
event = event || window.event;
// find the url and title to set
var href = this.getAttribute("href");
var newTitle = this.getAttribute("data-title");
// or if you work the title out some other way...
// var newTitle = "Some constant string";
// open the window
var newWin = window.open(href, "_blank");
// add a load listener to the window so that the title gets changed on page load
newWin.addEventListener("load", function() {
newWin.document.title = newTitle;
});
// stop the default `a` link or you will get 2 new windows!
event.returnValue = false;
}
// find all a tags opening in a new window
var links = document.querySelectorAll("a[target=_blank][data-title]");
// or this if you don't want to store custom titles with each link
//var links = document.querySelectorAll("a[target=_blank]");
// add a click event for each so we can do our own thing
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", openWindow.bind(links[i]));
}
});
Sample JsFiddle
You can pass the title with hash and get it on another page, if this another page is yours and you can modify its code.
1st page:
...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...
2nd page - modify the body opening tag like this:
<body onload="document.title=window.location.hash.replace('#','');">
If the page you are linking to isn't yours, you can use window.open method:
open me
I have not seen addEventListener work reliably, especially when opening a new page using javascript. The best way to change the tab title and have it work reliably is to set a timeout until the page loads. You may have to play with the timeout value, but it works.
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
You have two options. Using pure HTML, you can let the user open up links, then later on change the title. Or you can change the title with inline JavaScript. Here's how you do both:
Method 1
Change your links by assigning a target attribute, and then later on use that window name to control the document. For instance in your links it would be: <a href="whatever" target="theNewWindow">. Whenever you want to change the title for this page, you'd use JavaScript as such: window.open("", "theNewWindow").document.title = "New Page Title!"; The problem with this method however is that all links with that target/window name will open in that same window. In addition, after the first time the link is clicked, your browser won't automatically switch to the new tab/window.
Method 2
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately. Basically it would come down to look like: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. This opens the window based on the href attribute, immediately changes the title, and sets the window to change the title to that when it finishes loading (just in case there really was a title tag).
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.
The simplest way is a follows:
var winTab = window.open("", "_blank")
//Open URL by writing iframe with given URL
winTab.document.write("write iframe with your url in src here")
//Set Title for the new tab
winTab.document.title = "Form Title"
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset. You can then either change the title dynamically when loading your page 2, or as others have suggested if you use window.open you can control the title from the parent page.
If you are in page 1, and opening page 2 in a new tab, you can't set title for page 2 from page 1.
If you have access to page 2 then it's possible, otherwise not.
I am new to html and javascript. I am working on a web based UI where I have a lot of data to show on a web page. I am showing it in table. Now for each row I have 2 images to display. I want to create one link in each row which opens a new window and show both the images. And also when I click on other links in other rows they should also open with the previous window already open.
Here is what I am doing:
for ($i=0;$i<$total_images;$i++){
<tr><td>Open Images with Link $i<td></tr>
}
and here is the javascript
function newPopup(url1,url2) {
popupWindow = window.open(url1,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
popupWindow = window.open(url2,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
The problem I am having is that this is opening only the second image not both images and I have to close the previous window for opening a new one.
Please tell me what mistake I am doing or what modifications I need to do in code to resolve both problems.
You're using popUpWindow as the reference for both.
That means the 2nd call to window.open will not open a new window, but will use the already existing one.
Give them different refences, for example...
function newPopup(url1,url2) {
popupWindow1 = window.open(url1,'popUpWindow1',...);
popupWindow2 = window.open(url2,'popUpWindow2',...);
}
In addition, due to comments by the OP, if you always want a new window then use _blank as a reference...
window.open(url1,'_blank',...);
You can open both urls in one window as easy as:
function newPopup(url1,url2){
var contents = '<img src="' + url1+ '"></img>' + '<img src="' + url2+ '"></img>' ;
var previewWindow = window.open('','Preview','','');
previewWindow.document.body.innerHTML = contents;
}
there is a problem in ie8 related to links. html generated from javascript and display in the jquery ui dialog box but when I click on the link in it, it open link url in the same window (a tag has the targer=_blank set) and the url of link appended to the host url.
var clip_link = 'http://www.example.com/'+'c/'+id;
var thumb = 'http://www.example.com/235/45'+'/thumb.jpg';
$('#clip-share-popup .thumb').append(
'<img src="'+thumb+'" alt="clip thumb" />'
);
it is set after an ajax call
page url is
http://www.example.com/abcd.php#page/1/1
after click on the link the url become
http://www.example.comhttp//www.example.com/c/1234#
this doesn't happen in any other browser
You are probably not prefixing links with http://:
Google
Would take you to http://www.yourwebsite.com/whatever-page-you-are-on/www.google.com