Currently, I'm downloading the file using POST form:
var form = document.createElement("form");
var element1 = document.createElement("input");
var element2 = document.createElement("input");
form.target = "_blank";
form.method = "POST";
form.action = path;
element1.value = authService.getToken();
element1.name = "Authorization";
form.appendChild(element1);
element.append(form);
form.submit();
element.empty();
In order to prevent current page's location change when the server doesn't send correct headers, I open set the form's target to "_blank", so that if an error occurs it is shown on the other page. But the problem here is that browsers block new tabs by default, and I don't want to force users to allow such behaviour. I've read that also there an option to specify iframe's id as a target. Is it going to work in my case? How can I then read an error from the iframe to show to a user?
I am working on this very problem right now. The best answer I've found for returning state from the iframe is to set a cookie in it. The cookie's name should ideally be unique to the particular download event (I'm using a guid), known to both pages, and its value can be an error message or empty for success. The parent page then polls for this cookie in javascript. I make sure that the download url always renders the cookie if there's an error, because it's hard to learn anything else about the state of the iframe. On success, the JS poller can hide a ”your download will begin shortly" message, and delete the cookie. On failure, do those and also show the error.
The big unanswered question is how well it'll work in mobile browsers. Popups are a terrible choice with them because they mostly default to blocking them with no prompt... but nevertheless there's a jQuery plugin out there for iframe downloads which, when it sees mobile, falls back to popups. That scares me.
Related
I'm trying to automatically send a motivational message to a friend who's studying for an exam over hangouts.
I'm using the hangouts app at https://hangouts.google.com/ (using the gmail site wouldn't allow me to access the DOM of the iframe because of the Same-Origin-Policy) and am already able to set the value of the chatbox-div:
var ifrm = document.getElementById('iframeid'); // changes after reload
var doc = ifrm.contentDocument;
var chat = doc.getElementById('chatdivid'); // also changes
chat.innerHTML = "go kathi go!";
This works already.
My problem now is: how do I either send the appropriate keypress to that div or fire the event/callback directly?
I already tried to send an enter-keypress like this:
var enterPress = new KeyboardEvent('keypress', {'key': 'Enter'});
chat.dispatchEvent(enterPress);
But this only deletes the faint informational "Send a message" message and doesn't submit the chat message.
I didn't find solution using JS for your problem, but I think (if you also didn't find it) you can use macroses.
I would use Firefox + iMacros. Chrome has this extension too, but it's worse.
When user click on input['type="file"'] and select a file... file get attached. But if user click again on input and browse files but doesn't select one and close the dialog, the selected file disappears (input filed resets). Is there any way to prevent that?
I'm pretty sure this is restricted by the browser as a security feature to prevent a user from uploading a file without first selecting it. I understand it was selected the first time but you can see how this can be used maliciously if we were able to set the value attribute or re-populate the input field after they hit "cancel" the second time.
as Eliel said it is not recommended to do so for security reasons, Ex: The second time if you retain the path value but the file gets changed to a malicious one it is a purely insecure
But I show you how to retain the old path value here
var file_name = this.value;
$('input[type="file"]').on('change', function (event, files, label) {
file_name = this.value;
});
there is no direct way to find if cancel is clicked on dialog(Not exposed to browser)
But use this
document.body.onfocus = function(){
document.getElementById('#fileInput').value = file_name;
} // to detect dialog closed
then the next time the dialog opened set the value to file_name (works Only in firefox with the below addon)
var pageMod = require('page-mod');
var self = require('self');
pageMod.PageMod({
include: "url of app",
contentScriptFile: [self.data.url('url of script file'),
self.data.url('url of script file'),...]
});
Ref:https://forums.mozilla.org/addons/viewtopic.php?p=25153&sid=b6380f9e2acbf759e8833979561dd6f1
Hope it helps
It's old but many customers are still asking for this to be fixed.
I did this to get around mine (with jQuery)
var oldSel;
$('input[type="file"]').on('change', function() {
if ($(this).val()) oldSel = $(this).clone();
else $(this).replaceWith(oldSel);
});
How do I make a bookmarklet that places something into a field and submits the form?
I think along these lines:
1)var p = document.open(http://site.com/form.htm)
2) var h = p.innerHTML
3) var f = h.getElementById('formfield')
now how do I get the URL of the current page to become the value for 'formfield'?
var p = document.open(http://site.com/form.htm)
This won't work. You may be thinking of window.open. If you use window.open, it will only be useful for your purposes if the bookmarklet is run from the same domain. If run from any other domain, it will open the window, but you won't be able to do anything else with the document in that newly opened window.
var h = p.innerHTML
This does nothing helpful in your case. It just returns a string of text.
var f = h.getElementById('formfield')
This is not correct because it uses "h", which isn't correct. What you probably want is this...
var w = window.open('http://site.com/form.htm');
// need code that will check if window is done loading before you use next line!
w.document.getElementById('formfield').value = window.location;
If you use the bookmarklet on the page with the form, you only need this:
document.getElementById('formfield').value = window.location;
If you want to open the window to another domain, enter a form value, and submit the form - This can not be done with a bookmarklet. A bookmarklet faces the same restrictions as any other javascript in a page. This is for security to prevent any web page on the internet from trying to take control of your browser and do things on other sites as you. Your only reasonable option in this case would be to create/use a browser addon/extension.
If you are looking to put the current page's URL into formfield, this is how it could be accomplished:
f.value = window.location;
If I understand correctly, you want to submit the current URL and maybe some other data to your server using a bookmarklet.
I would do it this way:
Append your form to the current DOM using JavaScript. The form should be hardcoded in the bookmarklet.
Populate the form, you are on the guest page now, same domain.
Submit the form, maybe using a target="_blank" for the result.
You can't use Ajax instead of a form to submit your data because of crossdomain restrictions.
1- OPEN FIREBUG, on the console tab
2- OPEN YOUR GMAIL ACCOUNT,
3- when gmail is loaded, click on one of your label (at the left under the draft box)
4- WITH FIREBUG YOU SEE THAT THE PAGE DOES NOT COMLETLY RELAOD SINCE ALL PREVIOUS ACTION STILL THERE FOR THE CURRENT DOCUMENT, BUT THE BROWSER COMPLETLY ACT LIKE THE PAGE HAVE BEEN RELOADED, stop button browser own loading effect, etc...)
5- !!!!! this is it..!!!!
Does some on have a clue on how site like Gmail can make the browser load on ajax call ( I mean show the loading icon and all, history, etc)
I already know what to check for the history navigation but how in the world they can make the browser to act like this was a simple link that load a complete new page.
from what I see with things like firebug Gmail basically retrieve mail information in JSON and than use some Javascript to render it to the user. But how they make the browser load in the while.
In gmail once it is loaded, obviously they ain't load all the data, from all your folder in background, so when you click on some of your folder and the data is not already loaded they make the browser 'load' like if it were loading a complete new page, while they retrieve the information from their server with some ajax call ( in Firefox you see the browser act like when you click on a normal link, loading icon, stop (x) button activated, and all).
Is it clear?
I came up with some 'ugly' code to achieve my goal that work quite nice in FireFox and IE (sadly it seems to not work in Chrome/WebKit and Opera).
I tell the browser to go to a url that it will not be able to reach before the ajax call end, with window.location=. The browser start to load and than when the ajax call sucess I call window.stop() (window.document.execCommand('Stop') for IE) than innerHTML the ajax data in the document
To me its look ugly and since it not work properly in Chrome/Webkit, this is apparently not the way to go.
There are many ways to utilize AJAX.
Gmail needs to load a lot of files/data before something meaningful can be displayed for the users.
E.g. showing the folder tree first doesn't make sense if it's not clickable or not ready for any interactive use.
Hence, what they do is show something lightweight like a loading graphic/progress bar while asynchronously (behind the scene), pull more data from the server until they can populate the page with a full interface for usage.
I don't know how to explain further. Maybe wiki can help: http://en.wikipedia.org/wiki/Ajax_%28programming%29
http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Use one of the methods shown as triggering a browser busy state in the table on the page above.
document.getElementById('iframe').src = "http://www.exemple.com/browser_load.html";
They are using iFrame. By changing the source of the iFrame.
Sitepoint has a book "Build Your Own AJAX Applications" and they show some content (all?) in this tutorial:
http://articles.sitepoint.com/article/build-your-own-ajax-web-apps
They will guide you with your AJAX coding.
Think this is your answer:
http://www.obviously.com/tech_tips/slow_load_technique
Looks like gmail and facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)
$(function($){
$('a').attr('onclick','return false;').click(function(){
var title = $(this).attr('title');
var href = $(this).attr('href');
$('title').html(title);
$('#content').load(href+' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
});
});
window.onpopstate = function( e ) {
var returnLocation = history.location || document.location;
var returnTitle = history.propertyName || document.title;
$('title').html(returnLocation.title)
$('#content').load(returnLocation.href+ ' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
}
I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.