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?
Related
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'm opening a new html file on button press using this:
window.location = "menu.html";
I want to go back to the index.html file in my "menu" activity after a button press.
I tried using
window.location = "index.html";
But it creates a new screen and if I click the return buton to go to my homepage it returns to the previous activities. Also
window.opener.location = '/redirect.html';
window.close();
Doesn't work. So how do I close the menu activity to go back to my main activity.
PS: should I use window.location or window.location.href to open new html file
Thanks in advance!
Try using window.open("menu.html", "menu"). In addition to opening the file you can pass in a second parameter to the .open method and the next time you want to open the menu.html file you can using window.open("menu.html", "menu") it will open the already opened file in the browser.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
I fixed it using
history.go(-1);
navigator.app.backHistory();
sugested in this answer:
Phonegap - navigator.app.backHistory() not working on HTML back button
Also the href on the end of window.location.href is used for links so you should use just window.location
Hello I am trying to add a download bottom for lightbox. The use were unable to click on the image directly, so currently I redirect them to the page of the image when they click on the download bottom.
However, I would like to allow the user to download the image directly as soon as they click on the download bottom. Below is the simplified code, but I can only change this part: function(){window.location = $(this).attr('href'); return false}
<a class='lb-download' href='www.XXXX.com/picture.jpb'></a>
<script>
$('.lb-download').on('click', function(){
window.location = $(this).attr('href'); return false})
</script>
Thank you so much!
Edit: Yeh, sorry for the syntax error, I have corrected it, but it was mistake. My real problem is how can I force download instead of going to the page of the image?
You have a syntax error here
try
$('.lb-download').on('click', function({
window.location = $(this).attr('href');
return false});
The key points are the dot before the className and the position of the parentheses.
When you click an anchor with a href, it changes the windows location to the href.
Right now you're doing exactly what the anchor does with your javascript ?
To download the image when the anchor is clicked, you can use the download attribute in newer browsers
<a class='lb-download' href='www.XXXX.com/picture.jpg' download="picture.jpg"></a>
FIDDLE
In older browsers you need to link to a page that sets the right content disposition headers, and passes the image as an attachment.
Morning All,
I was hoping someone could help or provide some sample code for me in refe to the following. I not too sure if i can simply set the asp.net (Visual Studio 2010) properties or if i need some java script to complete my task.
I have a web page with a link on it that when users click it opens to a new web page via the _Blank command.
What i would like to do is have this page open on a really small scale (640px X 480px) and layerd on top of the main webpage. This small page essentially just holds a gridview with items listed for documentation.
I have looked around the internet as i think this would be best done by using JavaScript in the smaller web page but i cant get this to work successfully.
I have found a sample and need to try and tweak this but have been unsuccessfull.
Here is the sample code i have....
<script type="text/javascript" language="javascript">
window.onload = function () {
var w = window.open("about:blank", "main", "width=640,height=480", true)
window.opener = "main";
window.open("", "_parent", "");
w.opener.close();
}
</script>
My smaller web page is named uploadview.aspx
Any help is advenace is much appriechiated.
Regards
Betty
You got to specify window URL in first param of window.open, and must have button to invoke that JavaScript, it's not clear why do you do that on page load event. Anyway, here is the example to open window on some link click
Open Upload View
<script type="text/javascript">
function OpenUploadView() {
window.open("uploadview.aspx?param=1", "_blank", "width=640,height=480", true);
}
</script>
You can also pass parameters to that aspx page like shown above.
You can use window.opendialog()
For more visit https://developer.mozilla.org/en/DOM/window.openDialog
As the title says "Google Chrome opens window.open(someurl) just fine...but page/window with clicked link also opens someurl.com.
When I click the "Click here" link with the onclick="shpop..." call attached, my pop up opens /facebook_login.php' correctly...BUT...at the same time, the original window opens /facebook_login.php too!
This happens in Chrome and IE, but FF is fine and doing just what i want..
I have this link:
Click here
I know I could remove the href="/facebook_login.php" and replace with href="#" .. but I need the link to work if js is disabled.
I have this js code imported in my tag:
function shpop(u,t,w,v)
{
var text = encodeURI(t);
var uri = encodeURI(u);
var h = document.location.href;
h = encodeURI(h);
var wwidth='600'; /*popup window width*/
var wheight='300'; /*popup window height*/
if(v=='' || undefined==v)v=document.domain; /*popup name/title */
switch(w){
case 'loginfb':
var url = '/facebook_login.php';
wwidth='980';
wheight='600';
break;
}
window.open(url,v,'width='+wwidth+',height='+wheight);
return false
}
Any ideas?
what is with returning false, and having false in the onclick?
This
onclick="shpop('','','loginfb','');return false"
Just needs to be
onclick="return shpop('','','loginfb','');"
If the onclick returns any error, the link will still open up. Do you see any errors in the JavaScript console? I wonder if the browsers are freaking out about any . in the window name from using document.domain. Try giving it a name.
onclick="return shpop('','','loginfb','foobar');"
According to the latest browser statistics - well last time it was measured anyway (2008) only 5% of users had Javascript disabled. Nowadays it's likely to be less. Consider that all browsers have it enabled by default. Therefore it's generally only advanced users that for whatever reason choose to disable javascript, and will therefore understand that there's a good chance any website they visit won't work as expected - Facebook, Google, Amazon - everyone uses javascript these days. It's perfectly acceptable to assume the user is using it, with one overall <noscript> version at the start of your page for those users if you really really want to cover all your bases :)
Here is the simplest solution:
<a href="/facebook_login.php"
target="FBpopup"
onclick="window.open('about:blank','FBpopup','width=980,height=600')">
Click here
</a>
You don't need return false because you actually want the link to execute.
The trick is to use the same window name in both the window.open and in the link target.
window.open will create the popup, then your login page will run in that popup.
If popups are blocked or Javascript is disabled, your login page will run in a new tab.