google chrome iframe body onLoad not working? - javascript

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.

Related

Microsoft Edge Refresh button does not execute the onLoad java script code

I have the following simple java script code which does not execute when I press the Refresh button in Microsoft Edge. None of the 3 alerts execute at refresh. It works well with Chrome.
<!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">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
alert('jQuery');
});
function func() {
alert('func');
}
function load() {
alert('load');
}
window.onload = load();
func();
</script>
</head>
<body>
</body>
</html>
This code can be put in an HTML file (test.html).
Why does this happen? Thank you.
Maybe use window.addEventListener("load", load, false);. Sometimes, if one thing doesn't work, another will.

window.open in https iframe does not open as pop up

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>

JQuery .load() does not work

I want to load the content of a webpage in a div. Here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
When the this item is clicked, the webpage should be loaded inside the content id:
<ul><li><a id="menu_top" href='testing.html'><span>My account</span></a></li></ul>
<div id="content"> </div>
JS:
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
testing.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
SUCCESS!
</body>
</html>
Unfortunately, the above code does not work. I have checked it multiple times but could not find the issue.
#Milind Anantwar is correct - must have the $(document).ready wrap your JS:
$(document).ready(function(){
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
});
I also tested whether or not the UL or OL tags affected it as #psicopoo mentioned, but it didn't seem to in Chrome. *ALSO, make sure that "testing.html" is a valid page to load.
*As noted on http://api.jquery.com/load/: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol."
I think you're encountering an issue with the page you're trying to load. I copied your code exactly and it works in Fiddle, see if this works for you, if so, it's probably your page:
testing.html
JS Fiddle:
http://jsfiddle.net/fb4j6y6d/

X-UA-Compatible ignored when page launched by ShowModalDialog

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.

Java script printing out a blank page

I have the following java script code
$("#btn_Print").click(function (e) {
e.preventDefault();
var printWindow = window.open("../private/analysisPrint.htm");
printWindow.print();
printWindow.close();
return false;
});
and the analysisPrint.htm page contains.
<!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>
<div>
<h4>
Print</h4>
First print page
</div>
</body>
</html>
The problem I am having is that I am always getting a blank page being printed. When i open the page directly and print its fine.
Any Ideas
You can (and probably should) wait for the page to load completely (including images):
var printWindow = window.open("../private/analysisPrint.htm");
$(printWindow).on('load', function() {
printWindow.print();
printWindow.close();
});

Categories

Resources