javascript generated links not working in ie8 - javascript

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

Related

Open other webiste in new tab alogn with my website

I have a website-1 (www.example.com). When a customer reaches out to my website, the other website-2 (www.example2.com) should be open in a new tab corresponding with the website (www.example.com).
How to do this
I would like to add to Daan Teppema's answer.
Add rel property in the tag, if the website is not safe or untrusted add noopener. but if you are directing within your website remove the noreferrer for SEO tracking purposes.
Example 2
This will keep your website tab open and in the meantime open a new tab with the link you've provided.
You can do an <a> element with the target="_blank" attribute.
Like so:
Example 2
If you want them both to load, then you can make it go to the second one in another tab with javascript using the window.onload event.
Like so:
window.onload = function() {
window.open(url, '_blank').focus();
};

how to display content instead of download as a file when firing GET Request?

I have a webpage which will display API response in tabular format. I developed this using Angular Js, Sevlets, Java- Rest Assured framework.
Each record in the table has a link to a log file which is an url coming as rest api response.
When I give it as an anchor tag and when I click it from the UI a file is getting downloaded instead of openning in a popup window.
My question here is how can I get the data from url instead of download it as file when user clicks on the link.
<td> <a ng-href="{{item.outputuri}}" target="_blank">Click Log
</a>
</td>
I have read several posts and got to know that we need to set content disposition at server side. But Its not possible so I want to handle it from Client side.
Thanks in advance.
Instead of trying to going to a separate url, how about displaying the content directly on the same page? You can display the content by dynamically creating an IFRAME element and inserting into host directly on your page.
The displayContent method below requests the url and then passes the content to createIframe. That method will create the IFRAME element and write the content to it. I added the base element to the content to make sure any relative links are rendered correctly.
this.displayContent = function(url) {
$http.get(url).then(res => this.createIfram(url, res.data, this.hostElem);
}
this.createIframe = function(baseUrl, content, appendToElem) {
var iframe = document.createElement('iframe');
iframe.className = 'content';
appendToElem.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<base href="' + baseUrl + '" />');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
// do some other processing on the document
}

Open a new page with div contents

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

How to set the title for the new browser tab?

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.

Javascript: Clicking Link to Download pdf

I am working on a JS program which should open a webpage www.mysite.com & click on a link inside that webpage to download a pdf.
The link to click looks like this:
<a onclick="download();return false;" href="#noWhere">Click to Download</a>
Ordinarily, manually clicking the link, calls the following function to download the pdf:
function download() {
document.forms[0].action = path + "/xxW04_sv_0140Action.do";
document.forms[0].target = "_self";
document.forms[0].submit();
}
My code is simplified javascript code to open the page & click on the "Click to Download" button is this:
<script>
var linkname = "http://www.mysite.com";
var windowname = "window_1"
// Opens a new window
var myWindow = window.open(linkname, windowname ,"width=400,height=600");
//should open a link to download pdf
myWindow.document.getElementById('href = \"#noWhere\"').click();
</script>
So far I can open the webpage "mysite.com" in a seperate window using but for some reason no button clicking is happening and certainly no pdf is downloaded.
Of course if I manually click the "Click to Download" button it downloads.
Can anyone tell me what i'm doing wrong? Why I cannot simulate a click with the above js code?
Or possibly give me some things to try. Any help much appreciated and Than you.
UPDATE:
From the initial answers below, possibly this method is doomed for failure! Can anyone suggest a better way I could be downloading these pdfs?
You'd better use:
<a href="http://www.mysite.com/mypdf.pdf">
This should download that pdf file.
It won't work. The same-origin policy will prevent you from accessing the content of any pages loaded from another domain.
Also, as #kamilkp pointed out, you have to provide the getElementById() function with an id value. You can't just plug any old stuff in there and expect it to work.
Another problem is your reliance on clicks for this to work. What about users that use the tab key to select links and then press Enter to follow the link?

Categories