I have a frameset with two child frames.
<frameset rows="241px,*" id="header_fr">
<frame src="frame1.htm"/>
<frame src="frame2.htm"/>
</frameset>
I use frame1.htm just as a header and I change its size dynamically every time content is changed in frame2.htm.
I change the size of frame1.htm using parent.document.getElementsByTagName("frameset")[0].rows = new_size + ",*";
Everything is working fine, but sometimes parent.document.getElementsByTagName("frameset")[0] is no longer available, it's null or not an object. What can be the reason for this problem?
How do you use the JavaScript function? It might be the DOM hasn't loaded completely that caused the issue. You should ensure that the function is executed after the object being fully loaded.
I use the code like below to test and it works well in IE 8, you could check it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="241px,*" id="header_fr">
<frame src="frame1.htm" />
<frame src="frame2.htm" />
</frameset>
</html>
frame1.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="background-color:aquamarine">
111
</body>
</html>
frame2.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="background-color:burlywood">
222
<script>
parent.document.getElementsByTagName("frameset")[0].rows = 40 + ",*";
</script>
</body>
</html>
Related
I am experiencing a problem whith showModalDialog on IE11. The dialog window works fine, but ignores the width and height parameters. The dialog opens in a very small window and the user needs to resize it.
I know that this function is deprecated in Chrome and I know other options like jQuery-UI dialog, but I want to know if it is possible to fix this problem for IE11 using showModalDialog.
js code:
var url = "/xxWar/xxModal.jsp?title=xx&frameUrl=/xxWar/xxServlet%3Faction%3Dxx";
var value = showModalDialog(url, init, "dialogWidth:" + width + "px;dialogHeight:" + height + "px;resizable:yes;status:no;scroll:yes;help:no");
and the xxModal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Thank you!
I fixed the problem adding this line <meta http-equiv="X-UA-Compatible" content="IE=7"> inside de modal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=7">
You don't need to go back as far as IE7, setting content="IE=9" works too - that's what we use & we set height & width according to our needs ;)
OK, I've not used iframes for a long time but this problem is so basic I must be missing something really obvious.
I have a page (Page A) containing a link (to Page B in the same domain/folder as the parent) that I want to open in an iframe in Page A.
pageA.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
</head>
<body>
Load ...<br>
<iframe id="tgt"></iframe>
</body>
</html>
pageB.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
When the link is clicked pageB opens in a new page (as if the target id isn't present), not in the iframe in pageA.
What am I doing wrong?
=========================================================
OK, sorted that but now I need to do this using php generated JavaScript. Here is a very minimal example:
pageA.php (parent page):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
<?php
$srcPage = "/pageB.html";
echo "
<script>
function loadIframe() {
window.alert('Clicked, loading $srcPage');
document.getElementById('tgt').attr('src', '$srcPage');
}
</script>
";?>
</head>
<body>
<p id="load" onclick="loadIframe()">[Click me to load] ...</p>
<iframe id="tgt" name="tgt"></iframe>
</body>
</html>
pageB.html (page to load - same as before):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
The script executes (alert is displayed) but the page doesn't load.
Thanks
Nigel
You should add the attribute name="tgt" to your iframe.
open link in iframe
For your second question, you mixed jquery with plain javascript.
This is how you change the src of an iframe using plain javascript:
document.getElementById('iframeid').src = '$srcPage'
This is what I have tried, couple of other things too, no luck.
This too, document.getElementsByName('btnK')[0].submit();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function click()
{
$('#myiframe').document.getElementsByName('btnK')[0].submit();
}
</script>
</head>
<body>
<iframe id="myiframe" src="http://google.com"></iframe>
<button type="button" onClick="click()">Logg inn</button>
<object type="text/html" data="http://google.no" width="100%" height="1000px"></object>
</body>
</html>
It is impossible because of the Same Origin Policy.
Do you want someone to load your bank account in an iframe on some random page and start clicking buttons? No, that is why this security measure is in place.
I'm trying to keep all the files Edge generates separate from my main files.
This is the html in the file it publishes:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
I copied the code over to an html file outside the animation folder containing all the generated files and changed the directory of the JS file it's referring to.
anim_edgePreload.js --> edgeAnimation/anim_edgePreload.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="edgeAnimation/anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-20819118 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-20819118">
</div>
</body>
</html>
The animation no longer appears on the page, any idea why?
I get this error in Firebug after a few seconds:
TypeError: AdobeEdge.okToLaunchComposition is not a function
function edgeCallback(a){htFallbacks[a]&&(a=htFallbacks[a]);AdobeEdge.preload.got[a]=!0;if(a==AdobeEdge.preload.last)AdobeEdge.okToLaunchComposition(compId),AdobeEdge.preload.busy=!1,AdobeEdge.preload.q.length>0&&(a=AdobeEdge.preload.q.pop(),AdobeEdge.requestResources(a.files,a.callback))}
My issue was displaying the animation in a div on another page. Any attempt to load the animation explicitly failed. I succeeded in resolving this issue by using the HTML object tag:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Banner</title>
</head>
<body style="margin:0;padding:0;">
<object data="animations/liferay/liferay-00.html" style="height:175px; width:100%"></object>
</body>
</html>
Do note I did NOT change any of my URL paths. All I did was point to the publish folder.
So if you still encounter issues try re-publishing.
Update:
Additional solution provided by Wayne Barron:
http://youtu.be/RQKqlpCkrjs
See code below: I want Page 1 to alert "#testing"...
This works in C and FF but not in IE :S
Page 1:
This is the page that will be visited
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<iframe src="http://page2.com/#testing"></iframe>
</body>
</html>
Page 2:
This is the page of the iframe.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
alert(window.location.hash);
</script>
</body>
</html>
I confirm the problem! location.hash and window.location.hash are just empty if page is within cross-domain iframe in IE9 (didn't tested in older versions)!
Try to use window.frameElement.contentWindow.location.hash in IE