I have a really simple Delphi XE7 program. It is basically just a TWebBrowser component embedded in a form with no extra code attached, other than a button that fires off the Browser.Navigate method. My understanding is that TWebBrowser is just an ActiveX wrapper for IE.
I am trying to use this to display a very simple page that references the D3 Javascript library (but so far doesn't do anything with it), and the web pages are served from a localhost webserver that is running on my PC using WAMPSERVER.
The web pages run just fine in Chrome or IE 11 (I have Windows 7, 64 bit). But when I try to view them within the Delphi/TWebBrowser program I get the IE error message "An error has occurred on the script on this page" (see image attached). The error seems to occur when trying to access the d3.js javascript library in the d3test/d3 folder on the local host. I have verified that the d3.js file does exist in this folder and this seems to be borne out by the fact that the page runs and displays just fine in both Chrome and IE.
Perhaps there is an issue with having an embedded web browser access locally hosted pages? Additional background -I have also cleared the IE cache, reset the Internet options on the Windows Control Panel, set IE security settings to the minimum level and temporarily disable my Norton Firewall/Virus scanner.
Does anyone have any thoughts on this? I'm really hoping to be able to get some D3 charts embedded in my Windows-based program.
Here also is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3\d3.js"></script>
</head>
<body>
Hello World
</body>
</html>
I added answer from your comments below the question so its may
helpful to others
add this meta tag into your web page
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case you should add this class to your code:
type TBrowserEmulationAdjuster = class
private
class function GetExeName(): String; inline;
public const
// Quelle: https://msdn.microsoft.com/library/ee330730.aspx, Stand: 2017-04-26
IE11_default = 11000;
IE11_Quirks = 11001;
IE10_force = 10001;
IE10_default = 10000;
IE9_Quirks = 9999;
IE9_default = 9000;
/// <summary>
/// Webpages containing standards-based !DOCTYPE directives are displayed in IE7
/// Standards mode. Default value for applications hosting the WebBrowser Control.
/// </summary>
IE7_embedded = 7000;
public
class procedure SetBrowserEmulationDWORD(const value: DWORD);
end platform;
class function TBrowserEmulationAdjuster.GetExeName(): String;
begin
Result := TPath.GetFileName( ParamStr(0) );
end;
class procedure TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(const value: DWORD);
const registryPath = 'Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION';
var
registry: TRegistry;
exeName: String;
begin
exeName := GetExeName();
registry := TRegistry.Create(KEY_SET_VALUE);
try
registry.RootKey := HKEY_CURRENT_USER;
Win32Check( registry.OpenKey(registryPath, True) );
registry.WriteInteger(exeName, value)
finally
registry.Destroy();
end;
end;
Finaly add to your OnCreate of the Form:
TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(TBrowserEmulationAdjuster.IE11_Quirks);
This should solve your problem
Related
I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Need to get callback from webpage to my "WebView" in C# using scriptnotify. But it's not working.
I hosted a webpage locally using node js. Webpage is as below.
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "latest";
window.external.notify('The script says the doubled value is ' );
}
</script>
</body>
</html>
After that created a UWP app to open the webpage using webview. Added window.external.notify in the JS to get the call back. But not getting the same.
//C# code to get the callback
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
//Added the notification handler here
webView.ScriptNotify += webView_ScriptNotify;
//Navigating to the local page
webView.Navigate(new Uri("http://localhost:8080/"));
}
async void webView_ScriptNotify(object sender, NotifyEventArgs e)
{
//Kept break point here , but it's not getting hit any time.
var jsScriptValue = e.Value;
Debug.WriteLine("Send to debug output.");
}
}
//Added a web view control in xaml file
<Grid>
<WebView x:Name="webView" Height="500"> </WebView>
</Grid>
UWP Webview ScriptNotify is not getting trigerred
Please check WebView document.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
So, you need add your uri to the content uri option.
I wanted to visualize some 3d data points in Cesium but didn't want to set up a server. I downloaded the Cesium-1.34.zip and just unzipped it in my desktop. I then made an .html file that also sits on my desktop and pulls resources from the Cesium-1.34 unzipped folder. I included some example code from http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries to test it out. The entirety of my code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium-1.34/Build/Cesium/Cesium.js"></script>
<style>
#import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
#import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net',
key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
})
});
var greenBox1 = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
-90.0, 36.0, 100000.0,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
The problem is that the green box that should be appearing on the globe is not there. I don't get any errors from the Developer Tools window. I do get some warnings and messages though:
Warning: DOM7011: The code on this page disabled back and forward caching.
Message: HTML1300: Navigation occurred.
Message: WEBGL11258: Temporarily switching to software rendering to display WebGL content. This application is using Cesium's default Bing Maps key. Please create a new key for the application as soon as possible...
The message about the key is weird because I'm definitely using my own key in the code, though I don't think that would interfere with the entity not appearing with no errors at all. I'm pretty stumped at this point, I would think if an entity can't be displayed there would be an error, but I got nothing. It might be because it really does need to run on a server. Any hints on what I'm missing or how to draw entities on CesiumJS with just a local configuration?
The Bing key error message is still showing up because you have the Geocoder widget visible (by default) on your viewer, and Geocoder uses the Bing API to do its geocoding. You can fix it by specifying the key up front, before you construct a Cesium.Viewer, like this:
Cesium.BingMapsApi.defaultKey = 'your_key_here';
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
Also, running Cesium directly from the file:// protocol is not supported, because Cesium relies heavily on assets like textures, web worker scripts, JSON files, and so on. A typical browser prevents JavaScript from a file from accessing other files. So instead, Cesium ships with a small server.js file that you can run with NodeJS to get a small development server going locally to host a copy of Cesium. For more details, see Cesium Up and Running.
After following this advice, the "green box" code from your original question should run just fine.
I will start by saying I am far from a JavaScript guy. I work more with HTML and CSS, and "dabble" with JavaScript, as in tweak some code to make JQuery code do what I'd like it to on the front-end.
I am having a bit of an issue with a task I am trying to complete, which has led me to using NW.js (Node Webkit) for the first time.
I am trying to create a 4 button user interface that allows for the following 4 events to occur on click:
1. Load a website in a new window
2. Open windows explorer to a specific directory and allow the user to browse
3. Extend Windows Display on a Dual Monitor Setup
4. Clone Windows Display on a Dual Monitor Setup
I was originally pretty much finished and achieved my results easily with an HTML Application file - I know, outdated, but it allowed me to work within my skill set and achieve the tasks I needed fairly easily. Problem wa, it wouldn't allow for CSS3 and the website being opened used it, and it pretty much ruined the look of it as a whole. Sooo I needed something new.
I stumbled across NW.js and have started away on that. I've got my package loaded up, my "app" is now launch-able, but the old script isn't working and I am back to square one. I have no idea how to launch executables in Windows using NW.js - it's driving me bonkers!
Below is the code that worked in the HTML Application file (minus the file explorer, which I had yet to get to before realizing it wouldn't work):
<!DOCTYPE html>
<html>
<head>
<title>My HTML App</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" language="javascript">
function RunPad() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
function RunExtend() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /extend", 1, false);
}
function RunClone() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /clone", 1, false);
}
function RunWebsite() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/Program Files/Internet Explorer/iexplore.exe", 1, false);
}
</script>
</head>
<body>
<div class="container">
<div class="col-1-2"><img src="website.jpg" onclick="RunWebsite();"></div>
<div class="col-1-2"><img src="resources.jpg"></a></div>
<div class="col-1-2"><img src="single_screen.jpg" onclick="RunExtend();"></div>
<div class="col-1-2"><img src="dual_screen.jpg" onclick="RunClone();"></div></div>
</div>
</body>
</html>
I'm really stuck on this and am not sure which route to take to complete this with NW.js
Any help would be appreciated.
ActiveXObject is for IE/Edge only so it won't work under Chromium (used by NW).
What you can do though is create individual Vbs scripts for each of your ActiveXObject functions and call/execute them as required with node.js (supported by NW) in this way...
function RunExtProgram(ProgName){
require('child_process').exec(ProgName,function(error,stdout,stderr){if(error!==null){alert('Unable to launch process:<br><br>'+stderr+'<br><br>'+ProgName);}});
}
Usage example:
RunExtProgram('C:/test/abc.vbs');
I've created a Firefox extension but I can't use it (nothing happens).
Does someone know why ?
The module hierarchy
my_firefox_extension
chrome.manifest
install.rdf
chrome/
content/
locale.html
overlay.js
sample.xul
The code
chrome.manifest
content firefox_extension chrome/content/
overlay chrome://browser/content/browser.xul chrome://firefox_extension/content/sample.xul
install.rdf
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>displaypages#bruno.com</em:id>
<em:name>Display the page locale</em:name>
<em:description>Welcome to this extension that displays the page locale when a user opens a new tab or windows</em:description>
<em:version>0.1</em:version>
<em:creator>Bruno Da Silva</em:creator>
<em:homepageURL>https://www.example.com</em:homepageURL>
<em:type>2</em:type>
<!-- Mozilla Firefox -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
sample.xul
<?xml version="1.0"?>
<overlay id="firefox_extension-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://firefox_extension/content/overlay.js"/>
</overlay>
overlay.js
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
gBrowser.addEventListener("DOMContentLoaded", function(e) {
var documentElement = e.originalTarget.defaultView.document;
var div = documentElement.createElement("div");
div.innerHTML = Read("chrome://firefox_extension/content/locale.html");
documentElement.body.appendChild(div);
});
locale.html
<!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" xml:lang="fr" >
<head>
<title>Page displayed when a user opens a new tab or window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Some text<p>
</body>
</html>
You missed one parameter which is probably causing the errors:
gBrowser.addEventListener("DOMContentLoaded", function(e) {
var documentElement = e.originalTarget.defaultView.document;
var div = documentElement.createElement("div");
div.innerHTML = Read("chrome://firefox_extension/content/locale.html");
documentElement.body.appendChild(div);
},
false // missing parameter on addEventListener
// add this and it might work
);
(Just guessing, no testing involved)
NS_ERROR_FILE_TARGET_DOES_NOT_EXIST might be caused by incorrect script file reference in sample.xul
<script type="application/x-javascript" src="chrome//firefox_extension/content/overlay.js"/>
src attribute is missing a colon after "chrome". It should be
src="chrome://firefox_extension/content/overlay.js"
The files in firefox could be corrected .
Try the following
Exit Firefox completely, then open your Firefox profile folder and delete or rename these files:
extensions.ini
extensions.cache
extensions.rdf
Starting in Firefox 4, also delete or rename:
extensions.sqlite
extensions.sqlite-journal (if found)
Note: Although the above files can be deleted, renaming them (e.g., "extensionsOLD.ini", "extensionsOLD.cache", etc.) is generally considered a safer option. This achieves the same result, but allows the user to retrieve any possibly required information from them later on.
Then try to restart the browser and install them
Else there is another method which may work (but dont know why/how they work)
Enable third party cookies - go to Tools -> Options -> Privacy and check the Accept third-party cookies box.
Does you extension work when using it in a live development environment, as opposed to having issues with the xpi installer?
With Firefox closed, create a
“pointer” file with the same name as
your extension’s Description:ID (as
found in your install.rdf) in profile
folder/extensions/ and edit it so that
it contains the path to your
extension’s folder (the root
containing containing install.rdf and
chrome.manifest files).
E.g. helloworld’s ID is
helloworld#mozilla.doslash.org and we
would like to register it in
X:\Dev\helloworld\ (i.e. there is
X:\Dev\helloworld\install.rdf file
etc.). Just put a single line into the
file at this path: profile
folder/extensions/helloworld#mozilla.doslash.org
X:\Dev\helloworld\ - note trailing
slash and no CR; this must be a SINGLE LINE
(Re)Start Firefox, and check that your
extension is installed.
This will help you make sure that the extension works, before you start tackling installation issues.