/    Sign up×
Community /Pin to ProfileBookmark

Prevent history w/ hidden iframe

I’m using a hidden iframe to do file uploads without a page reload. The problem is that posting to the iframe creates an entry in the browser’s history, meaning that any clicks on the Back button try to reload these requests, not the current page. This gets especially problematic because a certain kind of error that can be returned from the iframe results in the form being submitted again automatically, without the user clicking “Submit.” The script is complicated, but here’s an approximation:

HTML:

[code=html]<form method=”post” id=”theform” action=”upload_process.php” enctype=”multipart/form-data” target=”theiframe”>
<input type=”file” id=”thefile” name=”thefile” />
<!– (Submit is triggered elsewhere) –>
</form>
<iframe id=”theiframe” name=”theiframe” class=”hidden”></iframe>[/code]

JavaScript:

[CODE]//Some event handler
function doFormSubmit() {
var theform = document.getElementById(‘theform’);
theform.submit();
}
function handleReturn(code) {
switch (code) {
case ‘ok’:
//Do a bunch of stuff
break;

case ‘special’:
//Do special stuff and resubmit
theiframe.location.replace(‘/blank.html’); //The automatic resubmit doesn’t seem to trigger without this; thought it would also fix history; no go
doFormSubmit();
break;
}
}[/CODE]

And the iframe target upload_process.php:

[code=html]<!–Do all the processing–>
<html>
<head>
<script type=”text/javascript”>
window.parent.handleReturn(somecode);
</script>
</head>
</html>[/code]

So what can I do to handle the back button madness?

to post a comment
PHP

7 Comments(s)

Copy linkTweet thisAlerts:
@sushiFeb 17.2009 — don't use an iframe, but ajax to upload the files.
Copy linkTweet thisAlerts:
@tarsusauthorFeb 17.2009 — "Using ajax" is what I'm doing, as "ajax" is a loose term.

Of course, I'm sure you mean I should use XMLHttpRequest. That's not possible with file uploads. That is, unless you could explain what you mean in a little more detail?
Copy linkTweet thisAlerts:
@tarsusauthorFeb 17.2009 — Hmmm, let's see . . . here's the 11th line of code in the source JS from the URL you posted:

[CODE]var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');[/CODE]

So let me re-state this: "AJAX" means a loose collection of technologies to remotely handle data without reloading an entire page. Using a hidden iframe is as much ajax as a script that handles a JSON response instead of XML. Once again, the XMLHttpRequest does not handle file uploads, and the very example you pointed to is no exception.

I'm glad I could educate sushi. Now back to my actual original question: Is there anyone who can help with this?
Copy linkTweet thisAlerts:
@sushiFeb 17.2009 — lol thank you professor!
Copy linkTweet thisAlerts:
@tarsusauthorFeb 18.2009 — Well, uh . . . Perhaps I haven't been getting many replies because I posted this in the wrong forum! (Whoops!) Is there a moderator who could move this thread to the JavaScript forum?
Copy linkTweet thisAlerts:
@tarsusauthorFeb 19.2009 — No one can move this to the right forum for me? Well, guess I'll just keep posting!

sushi, the link you gave me actually turned out to be quite helpful. Since the basics of the technique in that example are the same as what I'm trying to do (post to a hidden iframe and watch for a response), I was able to dig into their script and see how they handle it. The answer (obvious actually, now that I see it) is to create a fresh iframe with each request and destroy it when the request is done. Then the target of the history item no longer exists, and the browser doesn't try to load it when the back button is clicked. Voila!

I did discover some other peculiarities in the script that are necessary to make it work, which I will post about separately.
×

Success!

Help @tarsus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...