In a Visual Studio 2015 "Javascript universal Windows" application I have this very simple code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- aaaaa references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<div id="myDiv">BEFORE</div>
<script>
window.onload = function () {
document.getElementById("myDiv").innerHTML = "AFTER";
};
</script>
</body>
</html>
If I run the application, choosing "Local machine" or any Windows Phone emulator, I see "BEFORE": the line that changes the innerHtml of the div is not executed.
Otherwise, if I execute the html file outside of Visual Studio, in a browser window, I see "AFTER": this is true for all browsers, with a little exception in the behavior of Internet Explorer 11: in this case I see the message "Internet explorer restricted this web page from running scripts or activex controls", and when I click "allow the content" I see "AFTER".
Why this very simple script does not work in Visual Studio? Is it a matter of security restrictions, like in IE?
And why I don't see any message at all in Visual Studio about the issue?
How can I solve this problem in Visual Studio?
I've tested your code. It's true but you should write your code inside of javascript files. Just move window.onload at the begining of the default.js.
It's not really an error, that's why VS 2015 won't signal it.
The fact is that inline scripts are not allowed in Universal Apps because it is a common cause of CSS (cross-site scripting) attacks.
See the first of the Remarks at the end of the link to Microsoft documentation.
Some workarounds are discussed here.
One possible cause could be the code inside js script tags overwriting the window.onload method. You seem to be using a mix of relative and absolute paths in the script tag includes. So when running outside visual studio these files might not get included so the window.onload is not overwritten. Some steps to debug would be:
Check web developer console for errors, network errors etc. (From memory F12 in IE)
Remove all other script tags and test.
Try window.addEventListener("load", function{ }, false); instead of window.onload.
Related
In HTML webpage, the content within noscript tags are not getting rendered by browsers with script blocking extension.
I have a page
http://www.zen76171.zen.co.uk/aaa2.html
with this HTML
<!doctype html>
<html>
<head>
<noscript>aaa</noscript>
<script>document.write("bbb")</script>
</head>
<body>
ccc
</body>
</html>
I understand that the contents of the noscript tag should run if a browser is not running javascript.
In chrome or firefox, with no extensions blocking anything, I get the output of bbb ccc. That's fine, that makes sense. 'bbb' shows because javascript is allowed, and ccc shows because it will show whether javascript is enabled or not.
If I install e.g. the uBlock origin extension or if in Firefox I install the NoScript extension(note- the name of that extension is coincidentally the same as the noscript tag), then when I reload the page I mentioned
http://www.zen76171.zen.co.uk/aaa2.html
It shows ccc. That indicates to me that scripts are being blocked (as it didn't show bbb, so that part(not showing bbb, is good.
But the output I would expect is aaa ccc, because I'd expect 'aaa' to show when scripts are disabled, and scripts are disabled.
There is also a secondary problem that I work around, which is that if I disable or even 'remove' the NoScript extension from Firefox, then I still get the same response of 'ccc', I have to uninstall and reinstall Firefox to remove the NoScript extension. But for now that will do when I want to remove the NoScript extension. uBlock Origin has no such issue(don't need to reinstall a browser to remove it!). So if anybody tries to reproduce this problem then I suggest they either use the script blocker they have, or as I have, use uBlock Origin.
Why does it show just 'ccc' and not 'aaa ccc' (when scripts are blocked)?
This is the case with uBlock Origin, or with the NoScript extension. So, it seems, it's with anything that disables scripts.
So, why is the aaa not being displayed ever. I'd think it should be displayed when scripts are disabled.
It only works, if the <noscript> is in the body, not the head. And it's absolutely correct that it behaves like that. Just think of setting any content inside the <head>: it won't get displayed.
Won't work: <noscript> in <head>
<!doctype html>
<html>
<head>
<noscript>aaa</noscript>
<script>document.write("bbb")</script>
</head>
<body>
ccc
</body>
</html>
Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen
Will work: <noscript> in <body>
<!doctype html>
<html>
<head>
</head>
<body>
<noscript>aaa</noscript>
<script>document.write("bbb")</script>
ccc
</body>
</html>
Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen
Additional
On MDN <noscript> page it says (emphasis mine)
Permitted content: When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements.
When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants.
Otherwise: flow content or phrasing content.
So: If in head, only link, meta and style allowed
Script blocking extensions generally work by blocking the script elements. They don't disable JavaScript support in the browser.
Since the browser itself has JS support enabled, it doesn't render noscript elements.
Use progressive enhancement instead. Start with the content for browsers where the JS doesn't work, then change it with JS.
Array.from(
document.querySelectorAll(".nojs")
).forEach(
node => node.remove()
);
<span class="nojs">aaa</span> ccc
In my HTA application I'm using a JavaScript calendar window, it opens using window.open() and closed using window.close(), when the user clicks on one of the dates. This calendar works fine on multiple browsers and versions over more than 10 years. It even works in HTA applications most of the time.
However on specific workstations running IE11. The window.close() command is simply ignored, resulting in the window left open. On other IE11 workstations it works fine. I figured that turning off the "Enable Protected Mode" checkbox on IE11, Internet Options, Security tab resolves the problem on one of the problematic workstation. However, other workstations works fine with this setting turned on and turning off this setting is not an acceptable solution.
Code sample which reproduces the problem:
HTA application
<HTML>
<HEAD>
<HTA:APPLICATION ID="OpenCloseExample" BORDER="thick" BORDERSTYLE="complex"/>
<TITLE>Open Close HTA container</TITLE>
</HEAD>
<iframe width="1024px" height="768px" src="http://localhost:28080/openclose.html"/>
</HTML>
openclose.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<script src="openclose.js"></script>
</head>
<body>
open
</body>
</html>
openclose.js
var win;
function openWindow() {
win = window.open("", "_blank", 'width=250,height=250,status=no,resizable=no,location=no,top=100,left=100');
win.document.writeln("<html><head><script src='openclose.js'></script></head><a href='#' onclick='javascript:window.opener.closeWindow()'>close</a></html>");
}
function closeWindow() {
win.window.close();
}
I can't see this working in any IE with any settings. The problem is this string: <script src='openclose.js'></script>. That is, a literal ending script tag in a string works as an ending script tag on a page, when HTML parser will find it. This means, that your script was never loaded.
To fix this, you've to break the literal tag, for example like so:
<script src='openclose.js'><\/script>
Since you have pointed out that IE11 is causing the JS not to work, you can force IE to render in an older version very easily.
<meta http-equiv="X-UA-Compatible" content="IE=9">
This meta tag is very popular amongst HTA applications for utilizing JS/ActiveX methods/properties within specific IE versions (most of them being deprecated).
For more information, visit the X-UA-Compatible Tag Wiki
Hope this helps
I figured this out eventually.
Changing:
open
to:
open
Has resolved the problem
The following is a snippit from my a little web page I'm putting together.
<script type="text/javascript" src="head.js">
</script>
<title>CPST 3410-85 Class Template</title>
</head>
<body onload="outputToDiv();">
The head.js file referenced in the script tag is below:
function outputToDiv() {
alert("JavaScript is working!");
}
In Chrome and in Firefox the alert is displayed indicating the JavaScript is working. In IE9 it is not. Furtermore I can't get ANY external script to run in IE9, regardless of the content. I have used custom security settings and lowered in a granular way every security setting to its lowest level, and gone into advanced settings and enabled literally everything I could find.
It should be noted that I am opening this from a local folder. All files are in the same folder, and again I stress that this works in firefox and chrome.
In IE9 I have enabled debugging and I get the error below:
Webpage error details
Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///E:/My%20Documents/My%20Web%20Sites/CPST341085/head.js
Of course it then tells me that "outputToDiv()" is undefined.
I am at a total loss here.
I got this behavior when I had:
<script type="text/javascript" src="jquery-1.7.1.js" />
However, this fixed it:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
Go figure...
David
I try to insert JavaScript code to YAHOO.widget.Dialog.setBody(...), bit this does not work in Chrome (I have Ubuntu) (In Firefox the code is working)
The html file (simple example that not working in chrome browser):
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/container/assets/skins/sam/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.2r1/build/container/container-min.js"></script>
</head>
<body class="yui-skin-sam">
<script type="text/javascript">
previewDialog = new YAHOO.widget.Dialog("previewDialog", { width: "600px", visible: true});
previewDialog.setBody('<h2>h2 text h2'+'<script>'+'alert("alert text alert");'+'<'+'/script>'+'</h2>');
previewDialog.render(document.body);
</script>
</body>
</html>
How can be my code fixed for working in chrome?
(In real project I try to insert more complicated javascript code)
I don't have a solution, but I am having the same problem.
I opened up Google Chrome's built in developer console and see several warnings:
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix?core.apexpages.devmode.url=1:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
SkillsMatrix?core.apexpages.devmode.url=1:3
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
I think the problem (at least for me) is that Chrome is most vigilantly enforcing a "Same Origin Policy" (cf. http://en.wikipedia.org/wiki/Same_origin_policy ).
The Force Times ( http://theforcetimes.wordpress.com/ ) currently writes about using an "AJAX Proxy" which may help to resolve some such issues. (His article is SFDC-centric but perhaps the principle will help if this is the problem you are having and you can establish your own proxy somewhere.)
It requires additional button-min.js and element-min.js with corresponding CSS as well.
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.