How to reload Main Page from within an iFrame - javascript

Within my scenario, I have a button within an iframe section of my page that performs some database processing.
What I need is a means of performing a page refresh of the main page, when this button within the iframe is pressed.
I am seeking some JavaScript code that I can trigger within the iframe, that will reload the main window holding the iframe.

window.top.location.reload();

If the parent's and child iframe domains will be different you will get cross-window security error, in that case you can try to use following:
window.parent.location = document.referrer;

window.parent.location.reload();

We can easily achieve the facing goal by set target="_parent" to the Links which inside the iframe.
Just like the following demo shows:
<!--ParentPage.htm-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Parent Page
<iframe src="FramePage.htm"></iframe>
</body>
</html>
<!--FramePage.htm-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
hello
</body>
</html>

define allFrame variable on your top frame:
var allFrame=1
and on all your frames check this function
if(top.allFrame === undefined)
{
window.parent.location = "your website top frame";
}

window.opener.top.location.reload();

If you code Page with aspx C# you can view code:
ClientScript.RegisterStartupScript(this.GetType(), "LoadParent", "<script language=javascript>window.parent.location.reload();</script>");

Related

How to change DOM element in embedded iframe content?

I have a situation where I must embed a legacy form inside a styled page using an iframe.
We redesigned our website to be beautiful, but we have to embed this ugly form on one of the pages.
Our beautiful website page ( beautiful.mycompany.com ) , contains an iframe like this :
<iframe id="embedded-form" frameborder="0" height="240" scrolling="auto" src="http://ugly.mycompany.com/old/forms/hzxkardx.P_Select" width="320"></iframe>
The ugly form, on the same domain but a different subdomain ( ugly.mycompany.com ), looks like this, without any ID's in the elements. I don't have access to change anything on the ugly page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
#import url(http://ugly.mycompany.com/css/web_defaultapp.css);
</style>
</head>
<body >
<H2>Legacy Form Title</H2>
<BR>
<BR>
I'm trying to access the H2 on the embedded page using javascript and the DOM.
I was hoping to use something like this, but I don't understand how to navigate into the page inside the iframe :
<script language="javascript" >
document.querySelector("iframe > html > body > h2").style.backgroundColor = "red";
</script>
Thanks for your help, I'm trying to use native javascript ( not jquery ).

How to change css background-color in iFrame

I am getting html code from iframe and want to set background-color to this class: class="body"
My HTML source looks like this:
<iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some-url" scrolling="no">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<body class="body">
....
</html>
I have tried with this jQuery code but not worked for me.
<script type='text/javascript'>
$('iframe').load(function() {
$("iframe").contents().find(".body").css('background-color', 'red');
});
</script>
First I have tried to check if color is working or not. If works I want to set background-color to none.
Is it possible?
Thanks.
No, it isn't possible. You aren't allowed to access the DOM of a page on a different origin.
If you have the cooperation of skycheck, you could post a message to the page in the frame and it could listen for that message and set the class based on it.

How do I remove iframe within itself by using javascript

I know that there are several similar questions, but I have to ask the question again with attached code because of being unable to work out.
I have two .xhtml file in JSF project. One is mainPage.xhtml has a button that generates dynamic html code to create an iframe (iFramePage.xhtml) and show it on the browser;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputStylesheet library="css" name="style.css" />
<script type="text/javascript">
/** Create dynamic iframe HTML code for iFramePage.xhtml **/
function createIFrameHTML(){
document.getElementById("iFrameContainer").innerHTML = '<div id="iframe0"><iframe src="iFramePage.xhtml" width="450px" height="300px"></iframe></div>';
}
/** Close iFrame **/
function removeElement() {
/*Both lines work properly when I call inside this page, */
/*..however it does not work by calling from iFramePage.xhtml */
//document.getElementById("iFrameContainer").removeChild("iframe0");
$('iframe0').remove();
}
</script>
</h:head>
<body>
<f:view>
<h:form id="mainForm">
<!-- Control Menu -->
<div id="cntrMenu">
<h:commandButton id="cntrBtn1"
onclick="createIFrameHTML();return false;"></h:commandButton>
<h:commandButton id="cntrBtn2"
onclick="removeElement();return false;"></h:commandButton>
</div>
<div id="iFrameContainer">
<!-- an iframe will be generated by createIFrameHTML() -->
</div>
</h:form>
</f:view>
</body>
</html>
The other page is iFramePage.xhtml that has some html and javascript code;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputScript name="......js" />
<h:outputStylesheet name="....css" />
<script>
/** Close iFrame.**/
function closeSelf() {
/* Two lines works properly, however third line does not work!*/
//window.top.location.href = "HIDDEN";
//parent.document.location.href = "HIDDEN";
parent.removeElement();
}
</script>
</h:head>
<body>
<input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();" />
</body>
</html>
I can generate the iframe by clicking "cntrBtn1" button and removing by clicking "cntrBtn2" inside mainPage.xhtml. However, I need to remove the iframe within itself (iFramePage.xhtml). When I click "exitBtn" in iFramePage.xhtml, the iframe does not disappear. There is nothing about cross-domain, because mainPage.xhtml and iFramePage.xhtml are in the same JSF project, even in the same directory. I can redirect the parent page (looks at two lines in closeSelf() in iFramePage.xhtml), but I cannot remove the iframe by using parent element, why! Please, help me :)
Communicate between the parent and iframe using window.postMessage.
Replace the closeSelf() function in iframe page to the following :
function closeSelf() {
parent.window.postMessage("removetheiframe", "*");
}
and on the parent page, add the following code to listen when the iframe sends a message :
function receiveMessage(event){
if (event.data=="removetheiframe"){
var element = document.getElementById('iframe-element');
element.parentNode.removeChild(element);
}
}
window.addEventListener("message", receiveMessage, false);
You can also check the origin of postMessage by event.origin to make sure that the right iframe requested to remove the iframe.

JavaScript exit popup function doesn't work properly in Chrome and IE

I have an exit popup js function which displays an alert and adds something to the url (and redirects) when someone tries to leave the page.
The alert is displayed in all browsers but the code:
window.location.href = "?p=exit"
is not executed in Chrome and IE.
It works fine in Firefox. When you reload the page an alert is displayed and the url is modified.
Take a look at the source code, it is very simple.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var exit=true;
function confirmExit()
{
if(exit)
{
window.location.href = "?p=exit";
}
if(exit)
return "Wait! Don't Leave Empty Handed!\n\nThank you for taking the time to check out our offer! Before you go we have a complimentary crash to help you succeed. Click the 'Cancel' or 'Stay On This Page' button if you're interested!";
}
</script>
</head>
<body onbeforeunload="return confirmExit()">
</body>
</html>
You cannot (cross-browser) redirect from "onbeforeunload".
Chrome blocks alerts set in "onbeforeunload".
Check out this answer for more information:
https://stackoverflow.com/a/7080331/353710

Why would window.print() and then window.close() called using register Page.ClientScript.RegisterStartupScript() method not work

I am trying to call the below method in Page_Load of an asp.net page:
Page.ClientScript.RegisterStartupScript(this.GetType(), "print", "<script language=\"javascript\" type=\"text/javascript\">window.print();window.close();</script>");
(or RegisterClientScriptBlock method).
This would give a message to close the page in IE (or even close without any message when called as a popup) but works well with Firefox.
Surprisingly, the same events inside a function, when called onload of body will work well.
I can use workarounds to get this work but I was wondering why there is a different behaviour here? Does anybody know?
This is the generated HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="Default2.aspx" id="form1">
<div>
This is a test page!
</div>
<script language="javascript" type="text/javascript">window.print();window.close();</script></form>
</body>
</html>
Try this:
<script language="javascript" type="text/javascript">
window.print();
window.onfocus = function () {
window.close();
}
</script>
From: Close window automatically after printing dialog closes

Categories