Calling window opened javascript function [duplicate] - javascript

I'm new to Javascript and am learning the basics via a textbook that focuses on its applications in IE 7+ and Firefox 2+. However, I am using Chrome and am getting the following error when running the program given in the book: "blocked a frame of origin 'null' from accessing a cross-origin frame." Can anyone tell me what is causing the error and how I can fix it? The two programs are below.
//This is the program being loaded into the browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
function calcFactorial(factorialNumber){
var factorialResult = 1;
for(;factorialNumber>0;factorialNumber--) factorialResult *= factorialNumber;
return factorialResult;
}
</script>
</head>
<frameset cols="100%,*">
<frame name="fraCalcFactorial" src="calcfactorial.htm"/>
</frameset>
</html>
Below is the src file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
function butCalculate_onclick(){
try{
if (window.top.calcFactorial == null)
throw "This page is not loaded within the correct frameset";
if (document.form1.txtNum1.value == "")
throw "!Please enter a value before you calculate its factorial";
if (isNaN(document.form1.txtNum1.value))
throw "!Please enter a valid number";
if (document.form1.txtNum1.value < 0)
throw "!Please enter a positive number";
}
catch(exception){
if (typeof(exception) == "string"){
if (exception.charAt(0) == "!"){
alert(exception.substr(1));
document.form1.txtNum1.focus();
document.form1.txtNum1.select();
}
else alert(exception);
}
else alert("The following error occurred: " + exception.message);
}
}
</script>
</head>
<body>
<form action="" name="form1">
<input type="text" name="txtNum1" size="3" /> factorial is
<input type="text" name="txtResult" size="25" /><br/>
<input type="button" value="Calculate Factorial"
name="butCalculate" onclick="butCalculate_onclick()" />
</form>
</body>
</html>

This happens because Chrome doesn't allow frames from your hard disk to access each others' content. Which, technically we term as Cross-origin request.
Solution of the above problem is:
1. Either you host your webpage on a local web server. See the following link: What is a faster alternative to Python's http.server (or SimpleHTTPServer)?
2. Use any other browser like Firefox

If you use Visual Studio Code, you can install an extension named "Live Server". It helped me when I had the same problem.

If you don't want to use a local web server as suggested in the accepted answer you can run the browser with cross domain web security / same origin policy disabled.
For Chrome:
Disable same origin policy in Chrome
For Firefox:
Disable cross domain web security in Firefox
https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/
Disable firefox same origin policy

Save the following code as same_server_source.html, run python -m http.server in the same folder, and browse to http://localhost:8000/same_server_source.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View same server source</title>
</head>
<body>
<iframe id="iframe" src="/" sandbox="allow-scripts allow-same-origin allow-modal"></iframe><br>
<button onclick="alert(iframe.contentWindow.document.body.innerHTML)">View home source</button>
</body>
</html>

Related

URL in browser's URL bar changes quickly because of web forwarding

I have a VPS with the IP 123.123.123.123 and Apache listens there on port 7010. (I only have ports 7000 ... 7020 for myself).
I have registered a domain mydomain1.com by a domain provider and they offer a "web forwarding" :
Name TTL Type Priority Content Forwards to
*.mydomain1.com 3600 A 0 212.20.xx xx http://123.123.123.123:7010/
It works! Now when I write http://www.mydomain1.com in the browser URL bar, it automatically goes to http://123.123.123.123:7010/.
Problem: the browser URL bar only displays http://www.mydomain1.com for 0.5 seconds, and then displays http://123.123.123.123:7010/ instead, which is not nice in terms of user experience.
How to keep the display http://www.mydomain1.com in the browser URL bar?
Should I hack this with Javascript history.pushState(...)?
Should I do this in .htaccess with some ReverseProxySomething?
Another method?
Going from "Default Forwarding" to "Framed" by the domain provider simply solved the problem.
The only drawback is that this is the resulting HTML, so this means it's some sort of hack...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset frameborder="no" border="0" framespacing="0">
<frame src="http://123.123.123.123:7010/" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes>
<body>
Click to be redirected
</body>
</noframes>
</html>
Still looking for a better / cleaner solution!

Javascript works in Firefox but now in Chrome when coming from web server

I'm testing a web page that hides and unhides a div container when a different one is clicked on. I tested this is Chrome and it worked nicely, but after I put it on my web server I get undefined errors. When I test it in Firefox from the web server, it works fine. It works fine with Chromium in Lubuntu, but Chrome in Windows is giving me an error.
<!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>
<title>Chrome test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function hideDiv(nameId) {
var grouping = document.getElementById(nameId);
if(grouping.style.display == 'none') {
grouping.style.display = '';
} else {
grouping.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="group">
<div id="header" onclick="hideDiv('failingtoclose');">
<span>Testing</span>
</div>
<div id="failingtoclose">
<span>More testing</span>
</div>
</div>
</body>
</html>
The warning the developer's tools gives me:
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
and the error:
Uncaught TypeError: Cannot read property 'display' of undefined (Line 9)
The web server is running apache 2.2.22 on Ubuntu.
it's working fine in chrome on windows (version 30.0.1599.69 m) and I doubt it has to do with the server since there is no interaction going on, at least in the code you provide. Changing the doctype to standards mode (<!DOCTYPE html>) might help, since some browsers get confused otherwise (though I doubt chrome does).

Clicking h:commandLink causes Uncaught ReferenceError: mojarra is not defined

I am aware of this post and I double checked all the possibilities there.
I'm using JSF 2.0 with Mojarra implementation on Glassfish 3.
I'm trying to use two simple <h:commandLink> tags to change the application language.
This is the .xhtml page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>
<h:outputText value = "#{appMessage['page.welcome']}" />
</title>
<f:metadata>
<f:event type = "preRenderView" listener = "#{sessionController.changeLanguage}" />
</f:metadata>
</h:head>
<h:body>
<h1><h:outputText value = "#{appMessage['text.slide.welcome']}" /></h1>
<h:form id = "fm-language">
<h:commandLink action = "#{sessionController.changeLanguage('en')}" value = "#{appMessage['link.english']}" />
<h:commandLink action = "#{sessionController.changeLanguage('de')}" value = "#{appMessage['link.german']}" />
</h:form>
</h:body>
This is the HTML code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Maze Project</title>
</head>
<body>
<h1>Welcome</h1>
<form id="fm-language" name="fm-language" method="post" action="/maze/welcome.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="fm-language" value="fm-language" />
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
English
Deutsch
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8038443616162706480:-1387069664590476821" autocomplete="off" />
</form>
</body>
When pressing a commandLink nothing at all happens. There is no request sended to the server and this following Java Script error is thrown:
mojarra is not defined
The bean methods are correctly called and work fine in the rest of the appliction.
The source and generated HTML output looks fine, you have there a <h:head> in the JSF source (otherwise JSF wasn't able to auto-include any CSS/JS files), and the javax.faces:jsf.js script is present in the HTML output.
You said, you got a JS error that mojarra is not definied. That can only mean that the following auto-generated script
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
did not result in a valid response. That can in turn only mean that you've a Filter which is mapped on /* or *.xhtml which is restricting the jsf.js resource request in some way. Perhaps some homegrown authentication filter which is not doing its job entirely right. Try opening
http://localhost:8080/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces
in your browser to see what it actually retrieved (or use the web developer tools to check the response). If it's indeed not the proper response and the problem is indeed in the Filter, then you probably need to rewrite it as such that it should continue the chain when the request URI starts with ResourceHandler.RESOURCE_IDENTIFIER.
E.g.
HttpServletRequest req = (HttpServletRequest) request;
if (req.getRequestURI().startsWith(req.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
chain.doFilter(request, response); // Let it continue.
return;
}
Try to watch what happens in Firebug or something similiar, to see if there is actually a server communication.
And since it is a commandLink, look if there are any javascript errors on the page.
You say, you don't get any INFO logs, so I think the request doesn't even get to your application.
(I don't see a closing html tag in your xhtml file, maybe you just didn't pasted it.)

Focus with Cross-domain Ajax in Opera

You'll need Opera 9.62 to see what this is all about... Because that is the only browser that behaves strange when I do cross-sub-domain JavaScript calls (with Ajax involved). Please consider the following three simple files and place them at appropriate domains.
foo.html (parent of boo.html iframe) at foo.example.com
<!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=utf-8" />
<title>foo</title>
<script type='text/javascript'>
document.domain = 'example.com';
function sendRequest() {
window.frames['boo'].sendRequest();
}
</script>
<head>
<body>
<input type="submit" value="sendRequest" onclick="sendRequest();" />
<iframe name="boo" src="http://boo.example.com/boo.html"></iframe>
</body>
</html>
boo.html (iframe of foo.html) at boo.example.com
<!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=utf-8" />
<title>boo</title>
<script type='text/javascript'>
document.domain = 'example.com';
function sendRequest() {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
if (request) {
request.open('GET', 'http://boo.example.com/helloworld.php', true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var result = request.responseText;
alert(result);
}
}
request.send('');
}
}
</script>
<head>
<body>
</body>
</html>
helloworld.php at boo.example.com
<?php
echo 'Hello World!';
?>
If you test the above-stated code in browsers other than Opera (tested on v9.62), it works like a charm (I have tested in Safari, Firefox, Chrome). In Opera, it does not work and an error with security violation message is thrown. Does anybody know what the matter is?
I have found out a solution to the problem and I will post it here a bit later (I'd also like to see your solutions), but I'd like to learn more about the issue as well - can anybody explain it?
NB: I have set up all the files at my own server, so you can check it out here
UPDATE: I just tested it on the newest Opera 10.63 and it does not have such a problem. So you'll definitely need to use Opera v9.62 to observe the problem.
Some older Opera versions had a known bug that made setting document.domain affect the security context for XMLHttpRequest. Hence, after setting document.domain the script is no longer allowed to load contents from the server it actually came from.
The recommended solution is to simply upgrade to a version not affected by the bug, however if you absolutely need to support 9.6x you can easily detect the exception and fall back to using postMessage() for cross-domain communication. (In such an old version, you will need to call document.postMessage() - in newer versions it's window.postMessage() but it older versions of the HTML5 specification it was originally defined on document.)

javascript: "Object doesn't support this property or method" when ActiveX object called

I've got simple html on Login.aspx with an ActiveX object:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title></title>
<script language="javaScript" type="text/javascript">
function getUserInfo()
{
var userInfo = MyActiveX.GetInfo();
form1.info.value = userInfo;
form1.submit();
}
</script>
</head>
<body onload="javascript:getUserInfo()">
<object id="MyActiveX" name="MyActiveX" codebase="MyActiveX.cab" classid="CLSID:C63E6630-047E-4C31-H457-425C8412JAI25"></object>
<form name="form1" method="post" action="Login.aspx">
<input type="hidden" id="info" name="info" value="" />
</form>
</body>
</html>
The code works perfectly fine on my machine (edit: hosted and run), it does't work on the other: there is an error "Object doesn't support this property or method" in the first line of javascript function. The cab file is in the same folder as the page file. I don't know javascript at all and have no idea why is the problem occuring. Googling didn't help. Do you ave any idea?
Edit: on both machines IE was used and activex was enabled.
Edit2: I also added if (document.MyActiveX) at the beggining of the function and I still get error in the same line of code - I mean it looks like document.MyActiveX is true but calling the method still fails
I think the onload event is making the function to run even before the ActiveX object is loaded. You may try the following instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script language="javaScript" type="text/javascript">
function getUserInfo(){
if(document.MyActiveX){
var userInfo = MyActiveX.GetInfo();
form1.info.value = userInfo;
form1.submit();
}
}
</script>
</head>
<body>
<object id="MyActiveX" name="MyActiveX" codebase="MyActiveX.cab" classid="CLSID:C63E6630-047E-4C31-H457-425C8412JAI25"></object>
<script for="window" event="onload" language="JavaScript">
window.setTimeout("getUserInfo()", 500);
</script>
<form name="form1" method="post" action="Login.aspx">
<input type="hidden" id="info" name="info" value="" />
</form>
</body>
</html>
Now the getUserInfo() function will start to run 500 milliseconds after the page is loaded. This must give some time for the ActiveX object to be loaded.
IE8 manages access to the ActiveX on domain level.
To fix it:
IE8, Tools -> Manage Add-ons
In "Toolbars and Extensions" find your ActiveX
Right click - More information
Click - Allow on all sites
Enjoy
maybe the browser on the other machine does not support activeX? just a wild guess
Maybe the ActiveX needs some prerequisite (For example CRuntime) that isn't present on the other machines? Have you tried running depends for the Activex on the hosting machine?
Maybe the other machine has a virus scanner or similar which silently prevents ActiveX use?

Categories