I want to close a window open by this javascript written in my landing html page .
window.open(location,"_self");
in the location html page I have a button where I tried with
<div onclick="javascript:self.close();">Xyyyy</div>
<div onclick="javascript:window.close();">Xxxx</div>
None of them work.
Note: my condition in I have to open the new window in the same place.
any help is appriciated
I did a search on the subject and this page is what i found.
html (not mine)
<input type="button" name="Quit" id="Quit" value="Quit" onclick="return quitBox('quit');" />
JavaScript (not mine)
function quitBox(cmd)
{
if (cmd=='quit')
{
open(location, '_self').close();
}
return false;
}
There is even a test page.
I did a search for a bunny rabbit too (which isn't mine either).
Updated : Mar-12-2015
I did a search on the subject and this page is what i found.
I did a test with this code and confirmed it is not supported. The comments are good reading.
JavaScript (not mine)
function close_window() {
if (confirm("Close Window?")) {
window.close();
}
}
html (not mine)
close
close
I don't get completely what you are trying to do but here are some tips:
window.open("https://slackoverflow.com");
is used to open an entirely new window(can be used to open local files as well ofc)
window.close();
window.close() Closes the tab.
<a target="_blank" href="http://your_url_here.html">Page yada yada</a>
And this can be used to open a link or page in a new tab. If you play around with these for a little itll start to catch on.
I hope some of these ideas help and will help you put together what you are trying to accomplish :)
We have a requirement whereby a page can consist of a form with several sections. Sections can be added or removed. After the user chooses to add a section the form is submitted and a new page returned with the new section added. The browser should scroll to the top of the new section. This is fine and I have a generic jquery "scroll to anchor" solution working. However, in addition to simply setting window.location(), I also need to ensure that for keyboard users, hitting tab will take them to the next field after the anchor point. I'm using the solution to this question to do this.
This works fine in IE 8/9 but in firefox(15), I'm seeing a little focus square being rendered where the anchor tag is. I would like to suppress this, I tried setting display:none but of course this stops the scroll working. I tried to create a fiddle but jsFiddle doesn't demonstrate the problem as the fddle site itself is interfering with the focus setting - but the same code in the same browser running locally does.
here's a reduced version of my code that demonstrates the problem.
<html>
<head>
<title>test scroll</title>
</head>
<body>
<form>
<div>Blah</div>
<div>
<label for="a">Section 1: <input id="a" type="text" /></label>
</div>
<a id="scrollToAnchorSection2"></a>
<div>
<label for="b">Section 2: <input id="b" type="text" /></label>
</div>
</form>
</body>
</html>
and my jquery
$(document).ready(function() {
/* Find any "scroll to anchors" that have been set */
var anchors = $('[id*=scrollToAnchor]:first');
if (anchors.length == 1) {
window.location = "#" + anchors.attr("id");
// Set tab position
anchors.attr("tabindex", -1).focus();
}
});
and css
div {
margin-left:5em;
}
As requested...
the Blur function takes care of the input lost focus.
$('input').blur(function (){...})? isn't this what you need?
The jquery documentation has this interesting comment.
"The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types."
I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While it is working great in IE6 (and possibly newer IE versions), it is broken in FireFox. The iframe cannot be edited or used in any way.
The HTML <body>
<input type="button" id="bold" class="Button" value="B" onClick="fontEdit('bold');">
<input type="button" id="italic" class="Button" value="I" onClick="fontEdit('italic');">
<input type="button" id="underline" class="Button" value="U" onClick="fontEdit('underline');">
<hr>
<iframe id="TextEditor" class="TextEditor"></iframe>
The Javascript (for IE)
TextEditor.document.designMode="on";
TextEditor.document.open();
TextEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
TextEditor.document.close();
TextEditor.focus();
The above script makes iframe editable in IE. Fails to do so in FF. So I changed a few things for FF version-
The Javascript (for FF)
id("TextEditor").contentWindow.designMode="on";
id("TextEditor").contentWindow.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.close();
id("TextEditor").focus();
This section of code makes FF provoke an pop-up alert with a blank page as a target. It's still broken. What now follows are general functions for things like id() and fontEdit()-
function fontEdit(x,y){
TextEditor.document.execCommand(x,"",y);
TextEditor.focus();
}
function id(id){
return document.getElementById(id);
}
function tag(tag){
return document.getElementsByTagName(tag);
}
I'm sure FF doesn't handle iframe this way. So how do I get iframe to be used as a Rich Text Editor and without showing pop-ups. Please try your best to avoid jQuery since I'm not that good in it yet. Which is why the custom functions like id() and tag() exists.
And, I'm aware that there are other freely available Text Editors for me to download and use so please do not suggest me any such solutions and do not ask me why I must re-invent the wheel. Only answer if you know where I am going wrong and if you can actually help me fix the problem.
FF provoke an pop-up alert with a blank page as a target because you are calling the function window.open, instead you shoud call document.open.
window.open: opens a new browser window.
document.open: It opens an output stream to collect the output from any document.write() or document.writeln() methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
Note: If a document already exists in the target, it will be cleared.
See The open() method
This should works for you:
id("TextEditor").contentWindow.document.designMode="on";
id("TextEditor").contentWindow.document.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.document.close();
This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer.
I want a simple file download, that would do the same as this:
Download!
But I want to use an HTML button, e.g. either of these:
<input type="button" value="Download!">
<button>Download!</button>
Likewise, is it possible to trigger a simple download via JavaScript?
$("#fileRequest").click(function(){ /* code to download? */ });
I'm definitely not looking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.
You can trigger a download with the HTML5 download attribute.
Download
Where:
path_to_file is a path that resolves to an URL on the same origin. That means the page and the file must share the same domain, subdomain, protocol (HTTP vs. HTTPS), and port (if specified). Exceptions are blob: and data: (which always work), and file: (which never works).
proposed_file_name is the filename to save to. If it is blank, the browser defaults to the file's name.
Documentation: MDN, HTML Standard on downloading, HTML Standard on download, CanIUse
For the button you can do
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
HTML:
<button type="submit" onclick="window.open('file.doc')">Download!</button>
A simple JS solution:
function download(url) {
const a = document.createElement('a')
a.href = url
a.download = url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
With jQuery:
$("#fileRequest").click(function() {
// hope the server sets Content-Disposition: attachment!
window.location = 'file.doc';
});
You can do it with "trick" with invisible iframe. When you set "src" to it, browser reacts as if you would click a link with the same "href". As opposite to solution with form, it enables you to embed additional logic, for example activating download after timeout, when some conditions are met etc.
It is also very silient, there's no blinking new window/tab like when using window.open.
HTML:
<iframe id="invisible" style="display:none;"></iframe>
Javascript:
function download() {
var iframe = document.getElementById('invisible');
iframe.src = "file.doc";
}
Bootstrap Version
<a class="btn btn-danger" role="button" href="path_to_file"
download="proposed_file_name">
Download
</a>
Documented in Bootstrap 4 docs, and works in Bootstrap 3 as well.
I think this is the solution you were looking for
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
I hade a case where my Javascript generated a CSV file. Since there is no remote URL to download it I use the following implementation.
downloadCSV: function(data){
var MIME_TYPE = "text/csv";
var blob = new Blob([data], {type: MIME_TYPE});
window.location.href = window.URL.createObjectURL(blob);
}
You can hide the download link and make the button click it.
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
What about:
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
In my testing the following works for all file types and browsers as long as you use a relative link:
<button>Download 2</button>
/assets/hello.txt is just a relative path on my site. Change it to your own relative path.
my_file.txt is the name you want the file to be called when it is downloaded.
Explanation
I noticed there were comments under a lot of the answers that said the browser would just try to open the file itself rather than downloading it depending on the file type. I discovered this to be true.
I made two buttons to test it out using two different methods:
<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>
<button>Download 2</button>
Notes:
Button 1 opened the text file in a new browser tab. However, Button 1 would download the file for file types that it couldn't open itself (for example, .apk files).
Button 2 downloaded the text file. However, Button 2 only downloaded the file if the path was relative. When I changed the path to an absolute path, then the browser opened it in a new tab.
I tested this on Firefox, Safari, and Chrome.
Hello I just include the word 'download' and works well.
<a href="file.pdf" download>Download</a>
So in javascript you can use the follow:
function onStartedDownload(id) {
console.log(`Started downloading: ${id}`);
}
function onFailed(error) {
console.log(`Download failed: ${error}`);
}
var downloadUrl = "https://example.org/image.png";
var downloading = browser.downloads.download({
url : downloadUrl,
filename : 'my-image-again.png',
conflictAction : 'uniquify'
});
downloading.then(onStartedDownload, onFailed);
If your looking for a vanilla JavaScript (no jQuery) solution and without using the HTML5 attribute you could try this.
const download = document.getElementById("fileRequest");
download.addEventListener('click', request);
function request() {
window.location = 'document.docx';
}
.dwnld-cta {
border-radius: 15px 15px;
width: 100px;
line-height: 22px
}
<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>
<button>Download!</button>
This will download the file as .doc file extension is not supported to be opened in browser.
One of the simplest way for button and the text-decoration will help to alter or to remove the text decoration of the link.
Anywhere between your <body> and </body> tags, put in a button using the below code:
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
This is sure to work!
all you need to do is add Download after the file name which you have entered:
Before:
Download!
After
<a href="file.doc" Download >Download!</a>
Make sure the download is written with a capital letter otherwise it's not gonna work.
This is what finally worked for me since the file to be downloaded was determined when the page is loaded.
JS to update the form's action attribute:
function setFormAction() {
document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}
Calling JS to update the form's action attribute:
<body onLoad="setFormAction();">
Form tag with the submit button:
<form method="get" id="myDownloadButtonForm" action="">
Click to open document:
<button type="submit">Open Document</button>
</form>
The following did NOT work:
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
If you can't use form, another approach with downloadjs fit nice. Downloadjs use blob and html 5 file API under the hood:
<div onClick=(()=>{downloadjs(url, filename)})/>
*it's jsx/react syntax, but can be used in pure html
Not really an answer to the original question but it may help others which face similar situations as myself.
If the file you want to download is not hosted on the same origin but you want to be able to download it, you can do that with the Content-Disposition header. Make sure the server includes the header when responding to requests of the file.
Setting a value like
Content-Disposition: attachment will ensure that the file will be downloaded instead of viewed in the browser.
A simple Download pointing to your file should download it in this case.
If you want
Download
for the ability to download files that would be rendered by the browser otherwise, But still want a neat javascript function to use in a button; you can have an invisible link in html and click it in javascript.
function download_file() {
document.getElementById("my_download").click()
}
<a id="my_download" href="path_to_file" download="file_name" style="display:none;"></a>
<button onClick="download_file()">Download!!!</button>
Another way of doing in case you have a complex URL such as file.doc?foo=bar&jon=doe is to add hidden field inside the form
<form method="get" action="file.doc">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="john" value="doe" />
<button type="submit">Download Now</button>
</form>
inspired on #Cfreak answer which is not complete
The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server. but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it.
conclusion: attribute download in anchor tag only works if your html file is no server.
For me ading button instead of anchor text works really well.
<button>Download!</button>
It might not be ok by most rules, but it looks pretty good.
If you use the <a> tag, do not forget to use the entire url which leads to the file -- i.e.:
Download
I have a page which is displayed in a frame as part of another site. I want to add a link to this page which will allow the user to open the page in a new window i.e. out of the frame. how do I do this?
I have tried using
Remove frame
but this did not work and only opened a new window with the address javascript:window.location.href
<input onclick="javascrpt:window.open(window.location.href);" type="button" value="your value here" />
Try :
<a href="javascript:window.location='whereiwanttogo.html';" target="_blank">
You can use this, it worked for me:
Printable version