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 ).
Related
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.
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.
I have an IFrame in a DIV with its SRC attribute being dynamically set by a JS function. So, if src="file.jsp", then an onload function(inside the body in file.jsp) that contains adjustments to some styles inside the file.jsp was hovering IFrame all over the webpage once it was done with the function triggered by onload. i.e., iframe is spreading all over the webpage. Please let me know what needs to be done to preserve the IFrame position after the onload function.
The Code in my onload function is as shown
function load() {
var url = window.location.href;
if (url.indexOf('iip') > -1) {
document.getElementById('peLibraryTreeDiv').style.width = "596px";
parent.document.getElementById('privateEquityDiv').style.width =
"96.9%";
parent.document.getElementById('privateEquityDiv').style.top =
"77px";
}
}
this is a perfectly valid and working example
<!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>
<script>
function changeIframe(newLocation){
document.getElementById("myIframe").src=newLocation;
}
</script>
</head>
<body onload="changeIframe('http://www.example.com')">
<div style="width:650px;float:auto;border:1px dotted #cccccc;">
<iframe id="myIframe" src="http://www.ebay.co.uk/" width="100%" height=750px marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=auto>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
</html>
please note that some websites cannot be added as src to an iframe like http://www.google.com (not sure why, I have made a question on SO here can't add google.com as src to an IFrame)
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>");
I have a web application that is dynamically loading PDF files for viewing in the browser.
Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.
But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document?
I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.
Here is a JavaScript example of the object:
document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;
Any insight is appreciated.
I am not sure if this will work, as I have not tried this out in my projects.
(Looking at your JS, I believe you are using jQuery. If not, please correct me)
Once you have populated the divPDF with the object you might try the code below:
$("objPDF").attr({
data: "dir/to/newPDF"
});
Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.
You could also wrap it in a function to be used over and over again:
function pdfLoad(dirToPDF) {
$("objPDF").attr({
data: dirToPDF
});
}
If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:
http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf
See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'
#lark
A slight correction:
$('#objPDF').attr('data','dirToPDF');
The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.
#Tristan
Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.
Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:
Clicking on the following button:
<FORM action="">
<INPUT type="button" value="PDF file"
onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html',
'PDFN', 'width=620, height=630')">
</FORM>
opens this frameset Pdfn.html in an external window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset>
<frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
</frameset>
</HTML>
which refreshes in 12 seconds to the download of the PDF-Reader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset >
<frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
</frameset>
</HTML>
showing as result the PDF-file in the external window PDFN.
function pdfLoad(datasrc) {
var x = document.getElementById('objPDF');
x.data = datasrc;
}
This worked for me