I've seen some similar issues on here regarding the iframe onload, but nothing is working for me.
I have a hidden iframe that I use only for users to download a PDF that is dynamically created on my server. When the user clicks a button, the PDF is created on my server by pointing to a controller/action along with a query string of parameters.
This works great. However, I show a spinner and disable the UI when they press this button (BlockAndSpin function). I want to turn the hide the spinner and re-enable the UI when the PDF has been downloaded.
My onload method is never hit when I debug in Chrome and Firefox. I also tried to add the onload attribute to the iframe itself, and that didn't work either. The file downloads, but the UI stays the same and the onload event doesn't fire.
js
function downloadPOS(id) {
var ifrm = document.getElementById(id)
BlockAndSpin(true);
ifrm.src = "/staticPOS/AddOrDownload" + GetPosQueryString();
ifrm.onload = function () {
BlockAndSpin(false);
}
}
html
<iframe id="dlFrame" onload="BlockAndSpin(false);" style="display: none"></iframe>
Apparently this can't be done. My response is a .pdf being downloaded by the user and not loading anything into the iframe itself, thusly it never fires the event. I'll have to revisit how this is done.
I ran into a similar issue attaching to messages on a hidden iframe. IE does not seem to like cross domain communication with "hidden" (display:none) iframes.
My workaround was to set the iframe to an absolute position with a left value of -9999px. Then it's effectively hidden and you can attach to it.
Related
I've got a problem: I would like to catch a moment when the Save File dialog is closed or my csv file generated on the server is loaded (to hide a spinner for loading). I know there is no such event in the Javascript. I definitely don't want to add cookies for such a minor issue on the backend so I would like to implement another workaround. The only way out I see is iframe but as far as I can see event listeners like onload doesn't work in case of attachment header in Chrome at least. I've also tried to implement a kind of timer checking for iframe status but it worked right after request for file was sent. File is generated on server in some seconds (10-20) so this solution doesn't fit my goals.
I'm using Angular on the frontend so any solution compatible (vanilla JS, jQuery, Angular itself) will be a great help for me. Hope to get any. Thank you, guys!
There is no DOM event, which am aware of here, which is fired when Save file UI dialog is opened or closed.
You can try utilizing focus event to catch when the Save file dialog is closed and window regains focus after calling .click() on <a> element having download attribute set, though the approach is not completely reliable.
// append or display spinner element here
var csvUrl = document.createElement("a");
csvUrl.href = url;
csvUrl.download = "csv_filename";
csvUrl.click();
window.onfocus = function () {
document.body.removeChild(csvUrl);
// remove or hide spinner element here
window.onfocus = null;
}
I have an HTML form that contains regular inputs as well as a file input. When a user selects one or more files to upload, I instantly change the target attribute of the form to the name attribute of a hidden iframe on the page as well as change the action attribute of the form to the script that I want to send the file-upload request to.
From the requested script, I then upload the files to the server, and once the script ends, the onload event for the iframe fires, after which I make various interface changes.
Everything uploads correctly, but the problem is that the iframe request seems to cause a page request to be added to the browser history, which creates unintended consequences. I have currently found the following two issues:
If I upload one file and then right after that another file, and then
hit the Back button, the browser stays on the form instead of going
back to the page displayed before the form.
If I upload one file and then hit the
Back button, the browser corrects goes back to the previous page,
but if I then hit the Forward button to go back to the form, for
whatever reason, the script that is executed in the iframe to upload the files is immediately called upon the form loading, which causes other unintended side effects.
Point being, it seems like the iframe request being added to the browser history is causing all sorts of problems, and I'd like to avoid this if possible. Is there any way to stop this all from happening?
I should also note that I'm currently only developing in the most recent version of Chrome, but whatever solution I use must work back to IE8.
Below are some explaining refer to your bug
Rerendering components with iframe leads to browser history duplicates
The navigation events of the iframe (change its src attribute in this case) are propagated up to the parent window as well.
Here is a full demo and explaining of this weird bug. Back Button Behavior on a Page With an iframe
3-reasons-why-you-should-not-use-iframes
Reason #2: iFrames cause usability issues
The iFrame tag is notorious for creating usability annoyances. Among most common of them are:
* it tends to break the "Back" button in the browser being used;
* it confuses visually impaired visitors, using screen readers;
* it confuses users, suddenly opening the iframe content in a new browser window;
* content within the iframe doesn't fit in and looks odd because it can ignore the styles sheets from within the main website;
* content within the iframe is missing since the source URL changed; and,
* navigation of the site in the iframe stops working.
I figured out the problem and a solution. The problem was that I had an iframe on the form page when the form was first loaded and somehow (I don't know why) that was causing the problem described above.
However, I decided to remove the iframe from page-load, and instead dynamically create an iframe via JS when it was time to upload files. Once the files were uploaded and the iframe onload event fired, I then removed the iframe from the DOM via JS and it no longer caused the problem occurring above.
I'm honestly not too sure why that fixed the problem or if it's just a potential issue with browsers, but all the same, for anyone that wants to use an iframe to upload files on a form without reloading the page, be sure to not have the iframe on the page when it first loads, and instead dynamically add the iframe only when you need it and remove it when you're done.
I am trying to make it so when you click on an iframe it loads the page it is displaying. I have tried putting it inside a <iframe src="something.com"></iframe> tag but that does not work. I want an effect much like zoomer were when your mouse clicks on the iframe it sends you to the source page. This effect would require the iframe to not allow selection of its text. I tried putting a layer above the iframe of the same size and having that link but this does not work because of what this iframe will be doing.
EDIT:
The iframe is on the same domain
Ok third try: The magic of javascript
jQuery has a method, called .contents() , that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);
Now you can bind a click event to it:
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// User has clicked the Iframe !!
});
You could make the entire page inside the iFrame a link with target _top, but only if the url is page.(html/php)#iframe
Oh, I see. Why not just an image of the page that goes to the actual page, instead of an iframe?
I am struggling with this, hope something can shed some light.
On click of a button, I want to open a popup window, and transfer data from parent window to a text field in the popup. And, ensure popup is fully loaded before data is filled.
I tried using document.ReadyState=="complete", but it fires before the popup is fully loaded. I also tried to check the popup.body in a setTimeOut method, but to no avail.
Can you please help ?
PS: Popup window is a form from another domain !.
You won't be able to do this unless you control both domains due to XSS restrictions, but if you do control the content on both domains it's fairly simple with a bit of JS in the page you have opened in a frame.
Using window.opener in the frame will allow you to call any functions defined in the main window, this along with the seconds pages onload event is all you need to trigger a function when it loads.
If the content of the second page is not under your control the best thing you can do is an AJAX request which you will then need to be inserted into your page, this is a little nasty but will work.
I have a link in a mobile webpage that needs to track an advertiser clickTag and then activate click-to-call.
I've got the tracking working but I don't know how to trigger the tel:1800123456; with javascript. Any ideas? This is not a web app; it's a standard html page. I can use jQuery.
Update
Just calling window.open("tel:num"); after adding a tracking iframe on click was not reliable enough because sometimes the call dialog box would open before the iframe had finished loading.
window.open("tel:num"); also opens a new window then opens the call dialog box, which isn't a great user experience on iphone 3gs/4.
Do you have any control over the tracking iframe? If so, you could call a function which makes the window.location call once it's loaded. Something like
$(document).ready(function() { window.iframe_loaded(); });
in the iframe code (if it has jQuery), and a function in your main script called iframe_loaded which does the window.location call.
If you can't set the code within the iframe but can edit the iframe container code, then you could do this...
<iframe id="whatever" onload="iframe_loaded();" width="400" height="200"></iframe>
...so the onload calls iframe_loaded() which does window.location...
If you don't have control over the iframe or its content, then easy kludge would be to just wrap the window.location call in a timeout, i.e.
setTimeout('window.location="tel:18001234567";', 500);
The 500 at the end will delay it by half a second. (Increase it if your iframe is slow to load.) It's not as elegant, but might work fine and users probably won't notice a small delay!
Have you tried window.open(url); where the url is "tel:18001234567" ?
Seems like that should work, right?