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.
Related
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 ).
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.
There are a lot of posts about this topic but most of them are because IE doesn't set the attribute name dynamically.
I'm having a different trouble: I post a form (created dynamically) with an iframe as target. The first time it works great. Then I do it for a second time and IE opens a new window with the result of form's submission. I'm pretty sure it has to do with security issues because: if I create a simple HTML file (instead of a HTA) it works great. Also, if I run the same file that doesn't work locally (http://local.host/test.hta) it works great.
Any clue of whats going on or how can I fix it? Sadly its legacy code and I can't avoid using HTA or iframes and form submiting.
Here its the 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>
<HTA:APPLICATION
ID="oHTAGeneral_v5"
APPLICATIONNAME="TEST"
ICON='Img/icono.ico'
SCROLL="no"
SINGLEINSTANCE="yes"
SELECTION='yes'
NAVIGABLE='yes'
SHOWINTASKBAR='Yes'
WINDOWSTATE='normal' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
var url = "http://www.some-url.com/",
first = true;
$("#frame").unbind("load");
$("#frame").load(function(){
if (first) {
first = false;
$("#frame")[0].contentWindow.document.cookie = "testCookie=dummyValue";
$("<form></form>")
.attr("target", "frame").attr("method", "POST").attr("action", url)
.css("display", "none")
.appendTo($(document.body))
.append('<input type="hidden" name="dummy" value="dummy" />')
.submit();
return;
}
// Other stuff
});
$("<form></form>")
.attr("target", "frame").attr("method", "POST").attr("action", url)
.css("display", "none")
.appendTo($(document.body))
.append('<input type="hidden" name="dummy" value="dummy" />')
.submit();
});
</script>
</head>
<body>
<iframe id="frame" name="frame" width="200" height="50"></iframe>
</body>
</html>
You can try to use application="yes" attribute within iframe tag. Iframes without the said attribute are considered as unsafe in HTA, and all interaction between iframe and main window is blocked.
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
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>");