Cross Domain set iframe height dynamically - javascript

I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.
I have an simple HTML given below. I want to resize the iframe inside it according to the height of the content.
<!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" />
</head>
<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" width="100%" ></iframe
<table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012.
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
What i Have tried
using a second javascript file added to the iframe to send a postMessage back to the parent.
HTML Page containing iframe
<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
<script type="text/javascript">
var zino_resize = function (event) {
alert("sds");
var zino_iframe = document.getElementById('zino_iframe');
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//alert(zino_iframe);
if (zino_iframe) {
alert(event.data);
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}
window.addEventListener("message", myListener, false);
function myListener(event) {
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//do something
}
The function for sending height is also added on the master page of the mywebapplication.
I have been following this example
http://zinoui.com/blog/cross-domain-iframe-resize

Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.
https://davidjbradshaw.github.io/iframe-resizer/
you place two files one in the parent one in the child (iframe)
in your parent:
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
In your child you just add this file:
iframeResizer.contentWindow.min.js
The library takes care of the resizing and also cross domain. Check the docs.

Related

How to view secure intranet sites by handling Access-Control_Allow_Origin

I have written a simple html file to display the page provided by a hyper link under the table in the same page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.link').on("click", function(e) {
e.preventDefault();
var href = $(this).attr('href');
$("#content").html('<object data='+href+' />');
return false;
});
});
</script>
<style>
object {
width: 1570px;
height: 1000px;
border: 1px solid green;
}
</style>
</head>
<body bgcolor="#EBF5FB">
<h1 align="center" >SLA Monitor Reports </h1>
<div align="center">
<table cellpadding="25px" border=1>
<tr>
<td><a class="link" href="https://www.wikipedia.org/"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1ITD.png" alt="SRs Proposed Due Date" style="width:200px"></a></td>
<td><a class="link" href="https://bwp.wdf.nova.corp/irj/servlet/prt/portal/prtroot/pcd!3aportal_content!2fcom.nova.pct!2fplatform_add_ons!2fcom.sap.ip.bi!2fiViews!2fcom.nova.ip.bi.bex?BOOKMARK=CU4A95OJ17A355B2112ML30G6"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1Google.png" alt="Ticket Aging" style="width:200px"></a></td>
</tr>
</table>
<br><br>
</div>
<div id="content">
</div>
</body>
</html>
The first hyper link which is targeted to wikipedia.org is properly displayed in a div under the table.
But when i try to access the second link which is an intranet site pointed to a bw report hosted in a intranet server,i get a access-control-allow-origin error and the page keeps on trying to validate against the bw server.
But if i try to open the same intranet link in a new browser window..it validates and i can access the BW report.
Can you please let me know how to access the same BW report in the same page using div tag and handle this Access-Control_Allow_Origin issue.

Trying to hide a frame with jquery when menu is hovered over

I have a page with a frameset that consists of two frames; a top frame and a bottom frame. The top frame has a menu with submenus. The problem I am having is that the bottom frame does not allow the submenus to drop down as they should. I could expand the size of the top frame but management does not want this. Since it appears to not be possible to have the dropdown menu flow over the bottom menu, the best way I can think of to make it work is to hide the bottom frame while expanding the top frame. This is theory only though. I have never worked with asp.net or frames before so, to be honest, I'm not sure if it will work or not.
There is a separate page for the frameset and frames and it looks like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="dhss.mohsaic.webapplication.mohsaic.DefaultFrameset" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>MOHSAIC</title>
<link rel="shortcut icon" href="/Images/bavicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0" />
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
<frameset border="0" framespacing="0" rows="95,*" name="frameset" class="frameset" id="frameset">
<frame src="<%=HeaderFrameURL%>" scrolling="no" frameborder="0" noresize="noresize" name="fraHeader" />
<frame src="<%=EntireBodyURL%>" scrolling="auto" frameborder="0" noresize="noresize" name="fraEntireBody" id="bottomFrame" />
</frameset>
</html>
The the html of the menu, which in a separate file is:
<div>
<table id="tblAreaTabs" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px; padding-top: 0px" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td class="DarkHeader" width="100%" bgcolor="#000000">
<asp:Menu ID="mainMenu" Runat="server" Orientation="Horizontal"
DynamicMenuItemStyle-CssClass="ChildLink" StaticMenuItemStyle-Font-Underline="true" StaticMenuItemStyle-CssClass="ParentLink" StaticEnableDefaultPopOutImage="false"
style="text-align:center;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='black', Positive='true');">
</asp:Menu>
</td>
<td valign="middle" class="DarkHeader">
<asp:HyperLink ID="hlError" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/error.gif" BorderWidth="0px" Height="15px">The connection to DSS is not available.</asp:HyperLink><asp:HyperLink
ID="hlWarn" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/warn.gif" BorderWidth="0px" Height="15px">The connection to DSS is partially available. </asp:HyperLink>
</td>
</tr>
</tbody>
</table>
</div>
the submenus are created dynamically depending upon the login credentials of the user
I have tried several ways to do what I want to do. The first was to add onmouseover="whileHovering()" to the asp:menu tag and add the following javascript:
var origCols = null;
function whileHovering() {
//alert("Yes, I'm working");
if (origCols !== null)
showFrame();
else
hideFrame();
};
function hideFrame() {
var frameset = parent.document.getElementById("frameset");
origCols = frameset.rows;
frameset.rows = "120, 0";
};
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
};
However, this did not work. I receive the error 'cannot read property 'rows' of null. After investigating, the frameset is null and nothing I did would change that. So I gave up on that route and tried:
(function() {
alert("I have entered the function")
$('#mainMenu').hover(function () {
alert('hidden function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "hidden"
}), function () {
alert('visible function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "visible"
}
});
I get no errors from this but nothing happens. It doesn't even hit the anonymous function.
I would appreciate it if someone could tell me what I am doing wrong.
If you use frameset and frames you will have such problems. Writing JS/Jquery code is just a workaround and frankly not so good.
Any specific reason why you are using it?
Have you tried using ASP.NET master pages to have common menu and using it on different pages?
If that's not a feasible option, have you tried using iframe? In the main html file, create your menu and below the div/table tag of your menu, add an iframe. This iframe will show different pages that you are currently showing in #bottomFrame.
Do you put $ before (function() in your code? $(function() {}) fires when the document has been parsed and is ready, without it your function won't work. Also you don't need to use getElementById('bottomFrame').style.visibility in jQuery, there are quite short and elegant way to edit css rules, using css(property, value). Also don't forget to put ; in the end of your statements. The whole code looks like this:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$(this).parent().css("visibility", "hidden");
}, function() {
alert('visible function working');
$(this).parent().css("visibility", "visible");
});
});
UPDATE:
If I understood you correctly you want to hide bottomFrame when hover on MainMenu, then use this code:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$('#bottomFrame').css("visibility", "hidden");
}, function() {
alert('visible function working');
$('#bottomFrame').css("visibility", "visible");
});
});

Re-sizing iframe size on .toggle in iframed page

I've had a browse around similar posts but not found anything that is really related to my scenario.
I have a summary page in which I iframe several pages that the user has travelled through on route to the summary page. In each of the pages that are being iframed. I'm using .toggle to expand/collapse the content of the page.
The issue I'm finding is that I'm using a script on the summary page when it is first loaded to make the iframe the size of the content of the page it is including, but when I click to toggle that content and collapse it, it leaves the iframe at the same size so that there is a huge chunk of whitespace.
I'm guessing that I need to send something back from the included page to the summary page that says the content size has changed and to therefore re-size the iframe size but am unsure how to do this.
Can someone please point me in the right direction?
An example of the files is...
Parent.html
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
// Resize an iframe so it's as tall as its contents. This could be much shorter but is expanded for clarity.
function size_frame(frame_name, frame_id)
{
// Get the iframe element
var frame_element = document.getElementById(frame_id);
// Get the iframe frame-window object. Note this has different properties to frame_element.
var frame_window = frames[frame_name];
// Set the height to 1px first, because some browsers will give you the maximum height of either the
// frame or its contents, when you try to read the scrollHeight property as we do below.
frame_element.style.height = "1px";
// set the height of the iframe element to the "scrollHeight" of the document element of the frame window.
frame_element.style.height = frame_window.document.documentElement.scrollHeight +"px";
}
</script>
<h1>SUMMARY</h1>
<table border="0" cellspacing="0" cellpadding="0" width="850">
<tr>
<td><iframe src="child1.html" width="850" frameborder="0" scrolling="no" name="child1" id="child1" onload="size_frame('child1','child1');"></iframe></td>
</tr>
</table>
Child.html:
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
$('th[event-type-header]').bind('click', function () {
var eventType = $(this).attr('event-type-header');
$('tr[event-type="' + eventType + '"]').toggle('hide-event-type');
});
});
</script>
<h1>Child Page</h1>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="content">
<tr>
<th class="content" event-type-header="childPage">
Header <img src="arrow_down.gif" align="right" width="15" />
</th>
</tr>
<tr class="content2" event-type="childPage">
<td align="center">
<table width="750" cellpadding="0" cellspacing="0" class="content">
<tr>
<th class="content" colspan="2">Sub Heading</th>
</tr>
<tr class="content2">
<td>
Some Text
</td>
</tr>
</table>
</td>
</tr>
</table>
You need to use offsetHeight, rather than scrollHeight.

Communication between javascript and Flash

I´ve already added:
ExternalInterface.addCallback('sendToActionScript', setKeyboardFocus);
ExternalInterface.call("setFocus", 'pathfinder');
inside the init() function of my main class.
In html I have this:
<!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>
<title>pathFinder</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #333333;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function callToActionscript(str)
{
var fm = getFlashMovie("pathfinder");
fm.sendToActionScript(str);
}
function setFocus(id){
var f = document.getElementById(id);
f.focus();
callToActionscript('test')
}
</script>
</head>
<body>
<div id="flashContent" align='center'>
<table width="100%" height="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="middle" bgcolor="#333333"><table width="1050" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio
n=6,0,0,0"
WIDTH="1050"
HEIGHT="600"
id="pathfinder"
ALIGN="middle">
<PARAM NAME=movie VALUE="pathFinder.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#333333>
<EMBED src="pathFinder.swf" quality=high bgcolor=#333333 WIDTH="1050" HEIGHT="600"
NAME="pathfinder" ALIGN="middle" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always">
</EMBED> </OBJECT></div></td></tr></td></tr></table>
</div>
</body></html>
In the main stage I have a dynamic text field instance 'test_txt' to check if the function is called.
So after the ExternalInterface code I have:
private function setKeyboardFocus(str:String):void {
stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeysDown);
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeysUp)
test_txt.text = str
}
The problem is flash doesn´t get keyboard focus ( the event listeneres of KeyboardEvent are never added ), the function setKeyboardFocus is never called.
Any help?
According to one source I found, you need to add allowScriptAccess="always" in two places.
Where you have it, in the <EMBED ... allowScriptAccess="always"> </EMBED> block.
You also need <PARAM NAME="allowScriptAccess" VALUE="always" > with the other PARAM blocks
Verify that fm is being assigned to the object or embed component. You should be able to verify this using the javascript debugging tools in Chrome or in Firefox. I think it's here where you're going wrong. This is a completely non-standard html wrapper from what I've seen myself but for the most part it appears you have things in order. One thing that is going to be wrong though is that the Object tag and information will be applied for IE, the Embed tag information will be applied for browsers that use the Netscape plugin (Firefox... well everything but IE). Also I'm not seeing an id on the Embed element, I think you need to also give this an ID like you did with the Object, I'm not sure if you'll get javascript errors if you use the same exact ID, I would probably call it pathFinderE or something like that then modify this method:
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName + "E"];
}

jQuery ajax doesn't seem to be reading HTML data in Chromium

I have an HTML (App) file that reads another HTML (data) file via jQuery.ajax(). It then finds specific tags in the data HTML file and uses text within the tags to display sort-of tool tips.
Here's the App HTML file:
<!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-US" xml:lang="en-US">
<head>
<title>Test</title>
<style type="text/css">
<!--/* <![CDATA[ */
body {
font-family : sans-serif;
font-size : medium;
margin-bottom : 5em;
}
a, a:hover, a:visited {
text-decoration : none;
color : #2222aa;
}
a:hover {
background-color : #eeeeee;
}
#stat_preview {
position : absolute;
background : #ccc;
border : thin solid #aaa;
padding : 3px;
font-family : monospace;
height : 2.5em;
}
/* ]]> */-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#stat_preview").hide();
$(".cfg_lnk").mouseover(function () {
lnk = $(this);
$.ajax({
url: lnk.attr("href"),
success: function (data) {
console.log (data);
$("#stat_preview").html("A heading<br>")
.append($(".tool_tip_text", $(data)).slice(0,3).text())
.css('left', (lnk.offset().left + lnk.width() + 30))
.css('top', (lnk.offset().top + (lnk.height()/2)))
.show();
}
});
}).mouseout (function () {
$("#stat_preview").hide();
});
});
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<ul>
<li><a class="cfg_lnk" href="data.html">Sample data</a></li>
</ul>
<div id="stat_preview"></div>
</body>
</html>
And here is the data 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" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<table>
<tr>
<td class="tool_tip_text"> Some random value 1</td>
<td class="tool_tip_text"> Some random value 2</td>
<td class="tool_tip_text"> Some random value 3</td>
<td class="tool_tip_text"> Some random value 4</td>
<td class="tool_tip_text"> Some random value 5</td>
</tr>
<tr>
<td class="tool_top_text"> Some random value 11</td>
<td class="tool_top_text"> Some random value 21</td>
<td class="tool_top_text"> Some random value 31</td>
<td class="tool_top_text"> Some random value 41</td>
<td class="tool_top_text"> Some random value 51</td>
</tr>
</table>
</body>
</html>
This is working as intended in Firefox, but not in Chrome (Chromium 5.0.356.0).
The console.log (data) displays empty string in Chromium's JavaScript console. Firebug in Firefox, however, displays the entire data HTML.
Am I missing something? Any pointers?
Not sure of the answer, but a few avenues of investigation that I could think of:
Is data an object (rather than a string?) Maybe the Chromium console doesn't know how to display it. You could try an alternative output method to test it, or see if supplying the 'dataType' setting makes any difference.
Is the success callback being called at all in Chromium? It could be a bug, or some browser security feature (like cross-site-scripting protection, or having javascript disabled) that's blocking it.
Experiment with a static version of the HTML/CSS your code is supposed to produce, and make sure it displays properly in both browsers.

Categories

Resources