Overcoming domain access issues with Webbrowser Control in MS Access - javascript

I've developed a database application in MS Access 2010 that has an embedded WebBrowser Control which is used to view a local web page. The page uses the Google Maps API to provide some unique mapping capabilities and I use the web browser control to access javascript in the webpage to pass map data between the database and the webpage that renders it.
However, I've been running into the "Access is Denied" cross-domain error that I can't resolve. I recall addressing this before, and it involved adding a "Mark of the Web" comment and ensuring the appropriate IE compatibility mode - both of which I've done.
The HTML file is locally loaded, and it includes a series of javascript files in a separte folder (also local). The javascript files use the google maps API to populate the map in the web browser control
Anyway, see below for the index.html file that the webbrowser control directly loads inside MS Access. There's a lot of code overall, so I don't want to spam the thread until I have a better idea of what I should be looking for.
Incidentally, I am using an HTMLWindowProxy object from within VBA to directly call the loaded javascript functions embedded in the web pages.
Specifically, from within VBA, I call:
Call proxyWindow.execScript mScriptName
or
Call proxyWindow.Navigate mScriptName
It's this call that generates the error.
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.gm-style-iw {
min-width: 150px;
}
</style>
</head>
<body>
<div id="pathData">
<input type="hidden" id="docReadyState" value="unset">
<input type="hidden" id="default_position"
data-lat=41.843435 data-lng=-89.481619>
<input type="hidden" id="location_address" value="">
</div>
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=REDACTED"></script>
<script src="js/html.js"></script>
<script src="js/BindableBase.js"></script>
<script src="js/mvcarraybinder.js"></script>
<script src="js/ButtonControl.js"></script>
<script src="js/ElementOptions.js"></script>
<script src="js/SectionMarker.js"></script>
<script src="js/SectionPolyline.js"></script>
<script src="js/SectionMap.js"></script>
<script src="js/main.js"></script>
<script>
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById ("docReadyState").value = "ready";}
else {
document.getElementById("docReadyState").value = "busy";}
}
</script>
</body>

Related

Google Trends embed is destroying my webpage

I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?

Cryptowat.ch Embed API freezing all browsers

I am trying to make a local html file so that I can embed Cryptowat.ch's embed API into a desktop application through a webview.
I have found an NPM package that demonstrates how to use the API, and it seems really easy. It even comes with a sample JSFiddle.
Before digging into any of the customization I simply copied the JSFiddle to a local file:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#chart-container {
width: 550px;
height: 186px;
}
</style>
<div id="chart-container"></div>
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>
<script type="text/javascript">
function loadChart() {
var chart = new cryptowatch.Embed('gdax', 'btcusd', {
timePeriod: '30m',
width: 550,
height: 186
});
chart.mount('#chart-container');
}
window.onload = loadChart;
</script>
</body>
</html>
It works fine in the JSFiddle, but it doesnt work in ANY browser I've had installed. On Chrome, I see the chart, but no data and the page becomes unresponsive. On Firefox I only see a black square. On Internet Explorer, it's just a blank page.
Is there something obvious I'm missing?
There simply seemed to be a momentary blip in the API.
I was experiencing the exact same issues as you described, using your above code.
Without modifying the code at all, it now appears to be working correctly.

Ignoring particular javascript files

in my website i have embedded accuweather widget:
<div id="awcc1459281264171" class="aw-widget-current" style="float:right; width: 479px; height: 180px; margin:12px;" data-locationkey="275174" data-unit="c" data-language="pl" data-useip="false" data-uid="awcc1459281264171"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>
today i realized that i didnt pay last internet provider bill and instead of lanunch.js i got this stuff loaded:
<html>
<head>
<meta http-equiv="refresh" content="2; url=https://ebok.upc.pl/blokada">
<script type="text/javascript">
setTimeout("document.location='https://ebok.upc.pl/blokada';", 1000);
</script>
</head>
<body></body>
</html>
saying internet connection has been blocked. Unfortunatelly this replaced by provider file is generating error on my webpage, and makes it non functional:
Uncaught SyntaxError: Unexpected token < launch.js:1
question is - what would be the best workaround for that? mean how to disable widget if there is no internet connection etc?
thx for all responses

Unable to Display Google Map in Liferay 7 MVC Portlet

Here is my view.jsp, it is just the example from Google. I wanted to just get this to display before moving forward with it:
<%# include file="/init.jsp" %>
<p>
<b><liferay-ui:message key="mapsportlet_mapsPortletmvcportlet.caption"/></b>
</p>
<DOCTYPE! html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 20%;
margin: 0;
padding: 0;
}
#map {
height: 20%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeekwNluL4ssJ3QAFGPSkFHYYQvZoNbVM&callback=initMap"
async defer></script>
</body>
</html>
I'm running a local instance of liferay 7 on localhost:8080. I believe the JavaScript is firing because I did not have my API key set correctly and I could see in the javascript console that it was being denied. After fixing my API key, I no longer see any errors in the console of the browser, but I don't see the map display in my Portlet.
Do you see anything wrong with the view.jsp? Or is there another way I should be going about this?
You're tagging this question with "liferay", so I'm assuming that you're using the JSP you post as a portlet's view. A portlet must never contain <html>, <head> or <body> because this markup will be added by the portal.
Also be careful with the map id: If you add the same portlet to the page twice, this won't work as well as you'll end up with a duplicate HTML element id. If this ends up being a problem, utilize <portlet:namespace/> to make the identifier unique. You might also want to try if some other portlet adds this id already. It might be working already, just being invisible - depending on where this id has currently been used already.
Also, I'm not sure if the <style> will or will not be ignored when contained in a superfluous <html><head> section. Try by explicitly styling your <div> with an appropriate height.

IE executes inline scripts before external in dynamic iframe content

within a website I'm writing the content of a dynamically added iframe with JavaScript. After adding the content to the iframe the JavaScript in the iframe will be executed. Unfortunately there are differences in IE. IE (8-11) will execute inline JavaScript first, before executing external scripts even if they are before the internal scripts. This is very strange since the normal process is, that JavaScript will be loaded synchronously step by step.
Example:
My webpage:
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta charset="UTF-8">
<title>
TEST
</title>
</head>
<body>
<iframe name="testFrame" frameborder="0"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $iframe = $("iframe");
// Data
var data = "<!doctype html><html><head>";
data += '<scrip'+'t type="text/javascript" src="test1.js"><'+'/script>';
data += '<scrip'+'t type="text/javascript">console.log("Inline");<'+'/script>';
data += "</head><body>TEST</body></html>";
// Write in frame
var dstFrame = $iframe[0];
var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;
dstDoc.write(data);
dstDoc.close();
});
</script>
</body>
</html>
test1.js will just log a example status to see what kind of log will be executed firstly:
console.log("EXTERNAL");
In Firefox the console will be:
"EXTERNAL" test1.js:1
"Inline" test.html:1
"EXTERNAL" test1.js:1
"Inline" test.html:1
In IE the console will be:
EXTERNAL
Inline
Inline
EXTERNAL
As you can see the inline content will be executed before the external even if the external was added to the iframe before!
Can somebody tell me why and how to avoid it?
Notice: You can ignore the first two console logs since the parser will log the JavaScript even if it is inside a string (in my example it is inside the string).

Categories