I have a very simple button that opens a login popup window. The button is placed inside an iframe. The button resides on a different web site than the main page. When running this on my dev/stage site, all using http, all works as expected, the login pops up with no menubar or extra stuff. As soon as I copy to production and try and load the iframe content over https (main page still http) then Microsoft Edge ignores my settings to not show menubar, etc. and opens the button in a normal browser window, in another session. This works fine in IE, Chrome, etc. I cannot find anything published that says Edge is doing something different for cross browser and https iframed inside an http page.
Here is the resulting html for the iframe and it's contents:
<iframe name="logInOut_btn_iframe" width="200" height="32" class="btn-login-iFrame" id="logInOut_btn_iframe" src="https://www.website.org/logInOut_btn_iFramed.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>State Bar of Arizona :: Login Status</title>
<link href="/favicon.ico" rel="SHORTCUT ICON">
<script language="JavaScript" type="text/javascript">
function loginPop() {
var loginWin = window.open("/loginPop.cfm" + decodeURIComponent( document.location.hash ), "SBA_Login" + Math.random(), config= "width=500,height=315,toolbar=no,menubar=no,scrollbars=no,location=no,directories=no,status=no,resizable=yes,top=" + ((screen.availHeight/2)-150) + ",left=" + ((screen.availWidth/2)-250));
loginWin.opener = self;
loginWin.focus();
}
</script>
</head>
<body>
Member Login
</body>
</html>
</iframe>
Related
I am wondering if someone can help me with the "X-UA-Compatible" tag with regards to launching a modal dialog.
I have the following 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" >
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title></title>
</head>
<body onload="load()">
<form id="form1" runat="server">
<iframe name="fr1" frameborder="0" id="fr1" width="675px" height="550px"></iframe>
.
.
.
var src = http://someurl.web;
document.all.fr1.src = src;
If I browse directly to this page (not to the http://someurl.web, but the page with the IFrame on it that points at http://someurl.web), the "X-UA-Compatible" stuff will work correctly, however, if I launch my page like below:
window.showModalDialog(urlToPage, "", "dialogHeight: 550px; dialogWidth: 800px; center: Yes;")
The "X-UA-Compatible" stuff is ignored. Why is this? What do I need to do in order to get that tag to be recognized when the page it is on launched via showModalDialog? This is happening when using IE9 on an Intranet site with "Display Intranet site in Compatibility View" Management will not allows to uncheck this, hence the use of the "X-UA-Compatible" tag.
As I understand it, in IE9 (and newer), if a page is launched in an iframe, the document mode will match that of the parent document, regardless of any X-UA-Compatible meta element or server header, unless the parent is using standards mode and the iframe specifies quirks mode. I'm not aware of a workaround.
See http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx for more information.
EDIT: It does work (sorry). Something in this script is causing it to stop in google chrome:
function checkLocation() {
var loc = top.location.href;
var suffix = "subpage.html";
if (loc.indexOf(suffix, loc.length - suffix.length) !== -1) {
top.location.href = "index.html";
}
}
Original post:
I have IE 9, FF 3.6.3, Chrome (18.0.1025.151) and Safari 5.1.5 all installed.
This works in all of the browsers except google chrome.
I have a HTML layout which contains a named iframe. The iframe src changes to display the different pages. On one of the pages I have a script which is loaded onLoad in the body tag. This script doesn't load when the page is loaded in the iframe in google chrome only - it works fine in other browsers. Also, if I load the page directly into google chrome (not via an iframe) it works just fine.
How do I fix this?
Here is an example code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Example Page </title> </head>
<body> View subpage<BR/>
<iframe name="targetFrame"> </iframe>
</body>
</html>
subpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Subpage </title>
<script type="text/javascript" src="subpage.js"> </script>
</head>
<body onLoad="initialise()"> Hello </body>
</html>
subpage.js
function initialise() {
alert("Script loaded.");
}
Thanks for looking.
Turns out its just a security exception
Unsafe JavaScript attempt to access frame
with URL file:///C:/Users/.../website/index.html
from frame
with URL file:///C:/Users/.../website/subfolder/subpage.html.
Domains, protocols and ports must match.
Once its online it should be fine.
(This problem has been observed in IE9)
I am experiencing some problems relating to the display of an address bar when opening a new window from within a modalDialog.
The following sample page illustrates this.
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function windowOpen()
{
var sOptions = "width=300,height=300,location=0,menubar=0,toolbar=0,status=0";
window.open("test.html", "", sOptions);
}
function modal()
{
var sOptions = "dialogHeight:300px;dialogWidth:300px;";
window.showModalDialog("test.html", "", sOptions);
}
</script>
</head>
<body>
window.showModalDialog<br /><br />
window.open
</body>
</html>
Clicking on the 'window.open' link on the page works as expected and the address bar is hidden. If you click the link again in the resulting new window, it still performs as expected.
If however, you open the page in a modalDialog at any point (using the window.showModalDialog link) and then click on 'window.open' the address bar is visible.
Is there any way of avoiding this behaviour?
Any help would be appreciated.
I am creating a web app, similar to the like box code from Facebook: http://developers.facebook.com/docs/reference/plugins/like-box/.
When users paste it in web application they should be able to get the like box including feeds if they have selected the stream, while generating the like box code.
I have used following code to do this; but the problem is I am not able to retrieve the pictures of the users who liked the page.
How do I retrieve their profile information?
<!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" />
<title>Facebook Feeds</title>
<script type="text/javascript">
function getPage()
{
var getCont=document.getElementById("txarea").value;
document.getElementById("getContent").innerHTML=getCont;
}
</script>
</head>
<body>
<input type="text" id="txarea" />
<input type="button" id="fbBtnClick" value="Click" onclick="getPage();"></input>
<div id="getContent">
</div>
</body>
</html>
So I have tested this out and the following seems to be the problem:
The height of the iframe is being set to 427px by default the pictures are loading but are hidden becuase the height of the iframe is not long enough
By default facebook gives the following:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
Changing that too:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=567" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px;height:567px;" allowTransparency="true"></iframe>
Will show the pictures.. So I think you will have to take input from your users and then change the height then set it.
Was wondering how I can reload an iframe every x seconds, perferably not using javascript.
Thanks.
With a Refresh: x HTTP header or with an HTML element in the document loaded into the iframe:
<meta http-equiv="refresh" content="x" />
This element should be placed inside of the document's <head/> element.
If you do not have control over the document loaded into the frame or the server that it is served from, you have two options:
JavaScript.
Write another HTML page with the above <meta/> element and include an iframe in that page targeting the other page. So you will have an iframe inside an iframe: outer document -> iframe(inner document with meta-refresh) -> iframe(original iframe target)
EDIT: Regarding option #2, here's a decent generic iframe in PHP that gives some flexibility in terms of refresh time and style. Just call it with something like:
http://www.mydomain.com/genericIframe.php?url=http://my.domain.com/mypage.htm&refreshTime=60&style=putYourStyleAttribHere
Here's the PHP/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>Generic Iframe</title>
<meta http-equiv="refresh" content="<?php print $_REQUEST['refreshTime']; ?>" />
</head>
<body>
<iframe src="<?php print $_REQUEST['url']; ?>" style="<?php print $_REQUEST['style']; ?>"></iframe>
</body>
</html>