Have a problem that's been bugging me now for the past two days :(
I have set up an HTML web page that contains an iFrame that loads a frameset document. Yes I know, frames are ancient tech and should not be used, but that is the output produced from Adobe's RoboHelp tool so I need to deal with it.
I have attempted to add variations of JavaScript code that will resize the iFrame's height to fit the remaining height of the browser window. It works fine in Chrome, Safari, Firefox, etc. , but like most organizations the client has standardized to ancient IE (Internet Explorer 8) and it does not look like they will move forward anytime soon.
An image of the current problem is conveyed here:
Simply put, I cannot get the iFrame to occupy the space remaining between the banner and the footer in Internet Explorer (8). I have used both CSS styling and variations of JavaScript code to "read" (I guess) the height of the "frameset(?)" document in order to pass the height to the innerframe for resizing it. Most of the scripts I have seen rely on the height of the document inside the iFrame, but what happens when you have a frameset?
Here is the code of the main page containing the iFrame:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
width:100%;
height:100%
}
</style>
<script language="javascript" type="text/javascript">
function autoHeight(e)
{
alert(e);
if ( e.contentDocument ) {
e.height = e.contentDocument.body.offsetHeight + 35;
}
else {
e.height = e.contentWindow.document.body.scrollHeight + 35;
alert("e.contentWindow = "+ e.contentWindow);
}
}
this.onload = function(e) {
// or add it to the onload attribute of the body tag...
var ifr = document.getElementById('helpFrame');
autoHeight(ifr);
}
</script>
</head>
<body>
<!--banner code here, not too important -->
<iframe frameborder="0" id="helpFrame" align="bottom" src="/RCMP/prod/index.htm" width="100%" height="100%" scrolling="no" style="height:100%;">
Your browser does not support iframes.
</iframe>
<!-- added some paragraphs to actually "push" the footer down for now. -->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!--footer code here-->
</body>
</html>
And this is the code for the frameset (contained in the iFrame, from Adobe's RoboHelp published output). A lot of the javascript can be ignored, I believe the focus is on the frameset)
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>Orientation Guide To E-Division Headquarters</title>
<meta name="generator" content="Adobe RoboHelp 9" />
<meta name="description" content="WebHelp 5.50" />
</head>
<frameset cols="100%,*" frameborder=no border=0>
<frame src="whnjs.htm">
<frame src="whskin_blank.htm" noresize>
</frameset><noframes></noframes>
</html>
So the challenge is to get that iFrame to go full height (down to the footer) in IE! Any suggestions / solutions would be appreciated. I don't really want to use jQuery if I don't have to - JavaScript and CSS would be nice.
thanks!
Related
I use Extjs and JS to build a dialog where can display my html data from DB, that data is wrapped with iframe like this:
<iframe name="ext-gen568" frameborder="0" src="javascript:;" style="width: 514px; height: 189px;">
<html>
<head> ... </head>
<body>
<br><br>
<blockquote type="cite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<p>Hello</p>
<video><source src="x" onerror="alert('xss')"></video>
</blockquote>
</body>
</html>
</iframe>
I tried to add sandbox to iframe, but it doesn't work, the XSS alert still show.
Then I tried to change to <iframe src='#'... sandbox>, but XSS alert still show.
I removed src or just set it '' in <iframe src=''... sandbox>, it got this error: DOMException: Blocked a frame with origin "mytestdomain" from accessing a cross-origin frame.
What should I do to handle my issue?
Thanks a lot for any help.
The issue is fixed by set "allow-same-origin" for sandbox
<iframe sandbox="allow-same-origin" src="javascript:;"...></iframe>
Is there a way to fit height of iframe to it's content? Would you show me how to do it?
I tried searching and trying out the codes on the net but no luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<body>
<div align="center" style="z-index:1;">
<?php include 'header.html' ?>
<iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>
</div>
</body>
</html>
Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:
<div id="parent">
<div id="wrapper" style="position:relative">
<iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
</div>
</div>
I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.
And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!
I do it this way:
document.getElementById("iframename").height = (document.getElementById("iframename").contentWindow.document.body.scrollHeight) + "px";
Sometimes this didn't work but I noticed it was because the page of the iframe wasn't completelly rendered.
In this case, and I never noticed any further problem, put the instruction inside:
setTimeout(function (){ - here - }, 100)
Hope I helped.
If you have the same origin for document and iframe content (and in your example, you have) you can run from your main document:
var iframe = document.getElementById('my-iframe')
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 15 //add something to support paddings etc.
iframe.style.height = height + 'px'
var width = content.offsetWidth + 15
iframe.style.width = width + 'px'
But inspect the size of your 'content' element you adapt to, because often the element is much greater than the visible content.
I have one page where I am using tag. As a source of this iframe I am passing one external webapp. Now when this app is loading, in its home page it has code which checks whether the app is loading inside frame or in parent window. If it is not in parent window then it is getting the refrence to parent window and change the location in such a way that it display itself in parent window.
Now I dont have control over this web app so I cannnot change it's home page, is there any workaround where I can stop this application to change it's parent window location. Here is the sample code I am using. I cannot give the url of the internal webapp. Before I see the alter msg "test", webapp is changing the location of the parent window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
alert('test');
//frames["my_iframe"].onload = function()
//{
//alert("hey");
//}
//this also works for me:
document.getElementById("my_iframe").onload = function()
{
alert("hey");
}
}
// ]]>
</script>
</head>
<body>
Testing iframe....<br>
<iframe name="my_iframe" id="my_iframe" src="http://mywebapp.com" width="100%" height="100%" ></iframe>
</body>
</html>
You are trying to do what is referred to as XSS or cross site scripting, and is, for obvious reasons, impossible in any modern browser due to security mechanisms.
This article discuss this question and offers a 'solution', so to speak.
We Done Been ... Framed!
It's actually about avoid been framed (as the webapp you talk about does) but at the end there seems to be a way to frame any page...
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
We have a series of eLearning courses that were developed with Lectora and published for web. Unfortunately, the Lectora source files are lost. All we have are the index file, attendant .js files, and supporting documentation files.
The courses load ready when the index.html files are executed over the network, but not when they are copied to a local machine. There is no error. The window simply says "Loading , please wait".
Is there something I can change in the .html or .js files to enable local loading?
CODE FOR INDEX.HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>
CODE FOR JS FILE
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>
This is a hard one to fully answer since it could be a lot of things. It's very common for browsers to refuse to load local content as it can be malicious.
For a start I would point out that the two code samples you have posted are practically identical and are a mix of HTML and JavaScript, they're also incomplete. The HTML references two other libraries which you have not posted called trivantis.js and trivantis-cookie.js.
Assuming that you really do have all of the right files in absolutely the correct structure saved locally...
...I'll take a punt on using The Mark of the Web to tell IE to forget it's security concerns and load local content anyway.
So your HTML would look like this (notice the second line):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0016)http://localhost -->
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
Failing this there are a few other things that might help:
IE > Tools > Internet Options > Advanced > Security > place a check in Allow active content to run in files on My Computer
Add localhost to your Trusted Sites
Disable any addons your have for IE
Hopefully one of these works. Good luck!