I have seen similar posts before, but none of the solutions I have seen online seem to work for me.
I am trying to use a WebBrowser Control to display a locally saved HTML file that uses the Google Maps JavaScript API, but JavaScript remains stubbornly disabled.
To test the problem, I made a simple page using Google Maps based on https://developers.google.com/maps/documentation/javascript/examples/map-simple . I also added a button to directly test if JavaScript was functioning
c:\map-test.html works perfectly in both Firefox and IE.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="button" onclick="alert('JavaScript Functioning');" value="Test JavaScript">
<div id="map_canvas"></div>
</body>
</html>
I then created an MS Access form with a WebBrowser Control named cWebBrowser and added a method to load c:\map-test.html. The Google Maps interface doesn't load and the test button is dead.
Private Sub Form_Current()
Me.cWebBrowser.ControlSource = "=(""file:///C:/map-test.html"")"
End Sub
Next, I tried the online version of map-simple. The JavaScript worked as expected and the Google Map interface loaded
Private Sub Form_Current()
Me.cWebBrowser.ControlSource = "=(""https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple"")"
End Sub
I have been trying to solve this problem for quite a while without success.
Following this article, http://support.microsoft.com/?kbid=315933 , I enabled the My Computer Zone in IE security settings
In all zones I enabled the following:
Allow scripting of Microsoft web browser control
Active Scripting
Under the Advanced Tab I enabled the following:
Allow active content from CDs to run on My Computer
Allow active content to run in files on My Computer
Someone suggested adding Mark of the Web to my pages, but that didn't help either.
I have tried clearing the cache.
I have tried changing the filename, in case the cache remained after clearing.
map-test.html works when downloaded in both IE and the WebBrowser Control but only works locally using IE. What else could be causing the problem other than a security setting? Is there a security setting that I am missing? Is there any other test that I could do to diagnose the problem?
I'm at my wits end.
Environment:
Windows 7 64bit
Access 2010
IE 9
P.S.
The problem continues to get weirder
Today, I tried creating an extremely simple JavaScript page to ensure it wasn't the Google Maps code causing the problem.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('JavaScript Functioning');" value="Test JavaScript">
</body>
</html>
It worked at first and I was elated. Next, I tried the Google Maps test page and that worked too! So, I tried my full-featured map (working in IE and Firefox) that loads JSON output from my DB application and it all went down in flames, Google Maps code internally caused numerous errors (unfortunately, I didn't document the errors).
Now, I'm back at square one; none of the pages allow scripting, including the 5 liner above ?!?!
First, have a look at Enhanced Protected Mode and Local Files and Understanding Local Machine Zone Lockdown.
What works on my machine
I've tested different configurations, using your exact same environment, and they all work (see caveats below).
Created a new form, add a webbrowser control to it then:
Set its ControlSource to the URL works:
Download the HTML and save it to my desktop, then reference the local file in the ControlSource works:
Added a button and set the Webbrowser's ControlSource within its OnClick event works:
Private Sub Command1_Click()
WebBrowser0.ControlSource = "=""C:\Users\Renaud\Desktop\map-simple.htm"""
End Sub
Solutions
From the links to the articles about local webpage security I mentioned above, I tried a few things:
If the file in saved in the user's temp folder, it will load properly.
Try it, type %TEMP% in Explorer and it should take you to C:\Users\username\AppData\Local\Temp or something equivalent.
Save the html file there and try to load it from Access, for instance using the button on the form above:
Private Sub Command1_Click()
WebBrowser0.ControlSource = "=""C:\Users\Renaud\AppData\Local\Temp\map-simple.htm"""
End Sub
Alternatively, for IE to allow you to open the file, you would need to lower its integrity level so it is forced to run in the Internet zone when IE opens it (and thus make it work properly).
You can check the current settings for the file by opening the command prompt (as Administrator):
Now, we can set the file Integrity and check the settings again:
Now you should be able to open the file from Access and IE.
Note though that the ACLs travel with the file when you move them from NTFS system to another NTFS system, but they could be lost if you copy them to a USB flashdrive or another system formatted as FAT for instance, so they may need to be re-applied on the target machine if they are lost.
I tried to add a Mark Of The Web to the file itself, as Remou mentioned, but it doesn't work for me, the file won't load.
Here is what I tried:
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
....
One other thing that should work is to try to serve the files from a local http server, like Mongoose
What works on my machine
Purely for the sake of future readers.
Using Windows 7 and Access 2010 and the Webbrowser Control from the toolbar, not from the additional ActiveX controls; using the code (below) from the OP and adding Mark of the Web (MOTW); using a *.html document saved to desktop; setting webbrowser control source to ="C:\Users\<user>\Desktop\java.htm".
<!DOCTYPE html>
<!-- saved from url=(0023)http://www.contoso.com/ -->
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="button" onclick="alert('JavaScript Functioning');" value="Test JavaScript">
<div id="map_canvas"></div>
</body>
</html>
I've used the WebBrowser Control many times on Access forms, with locally-generated content.
For portability, I don't want to mess with the security settings on each computer.
My solution is to use VBA instead of Javascript, for anything run locally. You can even attach VBA-based event handlers to document elements. (Use Object Browser to explore the MSHTML library.)
This includes both files loaded with file:// and on pages built by navigating to about:blank and then writing content with WebBrowser.Document.Open / .Write.
For Google Maps, you should be able to build a local document that hosts an Internet-based iframe.
Security-wise, Javascript won't work in the local document but it should work in the iframe.
...Tom Robinson
Related
I created a general public webapp that is published for anyone even anonymous. I included code for gtag.js and google tag manager and have an analytics enabled account.
Trying to verify everything works, I couldnt see any realtime active users on the analytics dashboard. I then entered the same webapp with Firefox and the active user appeared.
I did a last test of dumping the whole webapp as static html page served on my localhost and it works as expected both in Firefox and Chrome/Chromium.
So I guess something combining chrome + apps script iframes/postMessage/whatever boilerplate is messed up for Chrome family browsers.
I tried using the Chrome Extension Tag Assistant and confirm that there are events fired when on localhost but nothing when running from https://script.google.com/a/macros/... thing.
Any tips on how to troubleshoot this ?
ps: I am not interested in building an app for server-side built reports with the AnalyticsApps, but just to record the activity of users on my webapp.
ps2: Adblock is disabled
edit: here is a quick example that you may test on this url:
Check here:https://script.google.com/a/macros/safewebmed.com.br/s/AKfycbwGoFhpo5qekznUEn9z4Crt9BtFz0ubDsjK9sNlcJz0xTroscdU/exec?testga=true
index.gs
function doGet(e) {
if (e.parameter.testga) {
var template = HtmlService.createTemplateFromFile('src/html/testga');
var html = template.evaluate().setTitle('testga').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return html;
}
}
testga.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PM7KHPS');</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-179509330-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-179509330-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
This reports correctly realtime user online with Firefox, but not with Chrome/Chromium.
It works for me on Chrome, try to refresh the page with cache cleaning or check if you have not enabled the Same site settings in browser setting.
I am using the Angular project template with ASP.NET Core. Reference
The caching should be enabled by default, to be sure I have added an StaticFileOptions object to the StaticfileMiddleware:
public class Startup
{
...
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
const int durationInSeconds = 60 * 60 * 24;
ctx.Context.Response.Headers[HeaderNames.CacheControl] =
"public,max-age=" + durationInSeconds;
}
});
...
}
Then I have created an test.html in wwwroot folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Test static files</title>
</head>
<body>
This is a test for static files!
</body>
</html>
When I dotnet run and navigate to https://localhost:5001/test.html the page is displayed correctly.
test.html
After I change the html page, I click to google chrome's address bar and press enter, to issue another HTTP request to the test.html file. I have not reload the page.
test.html after change
You can see that the change is reflected by google chrome and I received an status 200 again instead of 304. Cache-control in the Response Header is public,max-age=86400. Why does the static file caching not work? My desired result would be that the change is not reflected after the second HTTP request, so I can be sure static file caching is working properly.
I am using: .NET Core SDK 3.1.201 and Chrome 80.0.3987.163.
I found the solution. You have to trust the ASP.NET Core HTTPS development certificate.
Click here for details and then run the application. Navigate to your static file. Open a new tab in Chrome. Open the Chrome DevTools by pressing F12. Type the URL into the address bar or copy and paste it from the previous tab. It works!
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
When i open an swf file, Google Chrome downloads it, when it's already downloaded.
And then says "this kind of file can harm your computer", and it just wont play it.
I'm a sysadmin and today a user brought this to my attention. It seems that Chrome no longer supports the direct opening of these file types. Make sure you have the relevant adobe flash version installed and then use IE11 or Firefox. For more info see here: https://bugs.chromium.org/p/chromium/issues/detail?id=767342
Mike
Imbed the swf files in HTML and then load the html page. Note that you wont be able to directly access the HTML page, put the html folder structure in local tomcat and then access the content and obviously enable the flash player on chrome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="CaptivateContent">
</div>
<script type="text/javascript">
var so = new SWFObject("viewer.swf", "Captivate", "1025", "810", "10", "#CCCCCC"); //change the swf file name
so.addParam("quality", "high");
so.addParam("name", "Captivate");
so.addParam("id", "Captivate");
so.addParam("wmode", "window");
so.addParam("bgcolor","#f5f4f1");
so.addParam("menu", "false");
so.addParam("AllowScriptAccess","always");
so.addVariable("variable1", "value1");
so.setAttribute("redirectUrl", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash");
so.write("CaptivateContent");
</script>
<script type="text/javascript">
document.getElementById('Captivate').focus();
document.Captivate.focus();
</script>
</body>
</html>
I'm looking to load an included html file into a Flex HTML component in my AIR application, and that html file will include references to remote content. The default setup in AIR is to not allow this - content loaded locally from application then disabled remote content being allowed.
I've seen in their documentation that it looks like it's possible to change this, but I cannot find (after digging all over) how to do this.
From their documentation:
The origin of the content in a page determines the sandbox to which it
is consigned. Only content loaded from the application directory (the
installation directory referenced by the app: URL scheme) is placed in
the application sandbox. Content loaded from the file system is placed
in the local-with-filesystem or the local-trusted sandbox, which
allows access and interaction with content on the local file system,
but not remote content. Content loaded from the network is placed in a
remote sandbox corresponding to its domain of origin.
HTML pages in the application sandbox cannot use the script tag to
load JavaScript files from outside of the the application directory.
In order for a page in your application to load a script from outside
of the application directory, the page must be mapped to a
non-application sandbox.
That's great but how do I achieve this?
Looking to load a local file (app:/google-maps/capture.html) but allow remote content () so that google maps works.
Any ideas?
Answered my own question.
http://livedocs.adobe.com/flex/3/html/help.html?content=ProgrammingHTMLAndJavaScript_11.html
The section "Loading application content into a non-application sandbox" answered it.
The solution:
I needed two html files, the one loaded into flex contains nothing more than an iframe, that attempts to load the actual file that I want displayed.
capture2.html (loaded into HTML component)
<iframe width="100%" height="100%"
src="capture.html"
sandboxRoot="http://google.com/"
documentRoot="app:/google-map-capture/">
</iframe>
Then in the file that I actually want shown (capture.html):
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Works perfectly.