[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1058
  • Last Modified:

iFrame onbeforeunload javascript

I have an HTML page with an iframe in it that loads a page dynamically, depending on what option is chosen;eg it could be a Repository List, a Matter Management List or a Maintenance Screen.  There are icons on that page which user can click to bring up a new type of page in that iframe.

For one particular type, Repository, I want to catch the oneforeunload event if the user navigates to a different dynamic page, from using the Repository, because I need to delete some workfiles.  How do I catch the event in the iframe that it has been unloaded (surely it doesn't know)

Peter
0
pambrose1
Asked:
pambrose1
  • 5
  • 2
1 Solution
 
kadabaCommented:
I have attached two html files. You can run the first html and then click on the button, you will see an alert which is indeed an onbeforeunload of the iframe in the first html.

Onclick of the repository icon the page which you are dynamically showing in the iframe, say repository.html, you could have an onbeforeunload script which will be fired when user clicks any other icon. I hope you got my point.

let me know.

html1:

<html>
<head>
<script type="text/javascript">
function changeIframeSource()
{
	document.getElementById('myIframe').src="http://www.google.com";
}
</script>
</head>
<body>
<iframe id="myIframe" src="repositoryFrame.html"></iframe>
<input type="button" value="change iframe" onclick="changeIframeSource()">
</body>
</html>

html2:

<html>
<head>
<script type="text/javascript">
function navigateAway()
{
	alert("unloading");
}
window.onbeforeunload=navigateAway;
</script>
</head>
<body>
Test Page
</body>
</html>

Open in new window

0
 
siddagrlCommented:
@pambrose1

when you say...
"I want to catch the oneforeunload event if the user navigates to a different dynamic page, from using the Repository, because I need to delete some workfiles"

then i think you are trying to catch this event on server and do a cleanup there!
if yes, then read my responses in following question (which seems similar to your question)

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/ASP/Q_24991639.html
0
 
pambrose1Author Commented:
Thanks for the feedback - I've looked at both of these solutions and think that it falls between stools somewhat.

kadaba - how does HTML2 relate to HTML1 ?  Does it need to be in the iframe?

siddarg - your solution does not appear to relate to iframes.  

On reflection, as I know what workfiles are being created each time, I'll just clean up the folder before it is used for something else - its messy but simple!

THanks

Peter
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
kadabaCommented:
ok sorry I did not explain that..

save html1 as sample.html and html2 as repositoryFrame.html

you now run sample.html. You will see a button on sample.html when clicked will change the iframe content present in sample.html(iframe loaded is repositoryFrame.html) and will be later changed to google.com

I have scripted the onbeforeunload in the repositoryFrame.html which will be run when the change occurs.

So analogy would be , there would be a single iframe in your page and would be loaded with some page. There will be four icons on click on which the iframe will be loaded with a new page.  you can put the functionality in the child page which will be loaded into the iframe.

I hope you got my point
0
 
pambrose1Author Commented:
OK - its getting a little clearer (my alternative idea couldn't work unfortunately, so this has to work)

Problem is that I need it at a "higher" level - on my screen shot you can see that layout - I want to be able to move between the tabs, but ONLY when I move away from the "tabbed screen" do I want it to fire...
0
 
pambrose1Author Commented:
Screenshot
screen.JPG
0
 
pambrose1Author Commented:
and I should point out that the white space beneath the grey entry bar is also an iframe, but each tab image is in the same frame
0
 
pambrose1Author Commented:
OK - so starting to think now - (sorry for the multiple answers).  When I click on each tab it submits the form, which obviously indicates that an unload has occured.  If I change my tab navigation code so that it passes an "inpage" get variable, I could put a test into this pageunload script to check for the Get being set to Y.

Any ideas?  

I need a simple test that says if (Get "Intable" <>"Y") then perform unloadcode

Sorry - that's a very simply question isn't it?!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now