I'm using a form handling service which after hitting submit links to an intermediate page before using setTimeout() to link back to my original page. I would like to cover the ugly intermediate page with something nicer. So far I've tried having the submit button load a new window onClick, where the new window uses parent.write to open a div that would cover the entire page and allow me to write my own html. The problem with that is that it prevents the intermediate page from loading at all, and thus prevents my forms from being processed.
My current workaround involves using setTimeout() in the child window to load my own page immediately after the intermediate page is loaded. It works, but I still see the intermediate page first.
Please help me!
switched to 000webhost and wrote my own formhandler
Related
I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)
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 create a bookmarklet that follows this process:
From any page, click the bookmarklet
load a specific page.
Trigger an input button which causes page to reload
Once reloaded; open a new page; in this case a social media page.
This is what I've written so far:
if (!($ = window.jQuery)) {
// Inject jQuery to make life easier
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=SocialCredentials;
document.body.appendChild(script);
}
else {
SocialCredentials();
}
function SocialCredentials(){
$('input:submit').trigger('click');
window.open('http://www.facebook.com', '_blank');
}
The button submit click causes the page to process and clear the credentials of the user so they can visit social sites.
The above code works, but I want to make sure the page finishes loading before opening a new social media page.
Do I need to add some kind of wait() function? If I do add a wait method, will it kill the JavaScript and not open the new window? I'm fairly new to JavaScript, so I'm not familiar with these types of mechanics.
Edit:I should note that I don't have access or control to the page this bookmarklet will work on so I can't alter it's flow. What I'm trying to do is more of a favor for another department as a quick fix until they can make changes on their end.
Edit2: Updated the process.
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
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'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.