I am failing for 2 days on trying to reload an Image using Java script.
I hope you can help!
the Image is displayed but doesnt Change after the defined 7 secunds...
it's not a server-side Problem while i can see in wireshark that the data isn't even requested by the browser...
is anyone having an idea where my Problem might be?
please see my code below for reference
<html>
<!DOCTYPE html>
<html lang="de-DE">
<head>
<bodyonload="DispayImage()">
<img src="/img/dynamic_live_1.jpg" width="600" height="450" name=Cam>
<script language="JavaScript>
var imageUrl = document.Cam.src;
var random = new Date().getTime();
var delay = 7000;
var counter = 0;
var buffer = new Image;
function DisplayImage()
{
document.Cam.src = buffer.src;
LoadNextImage();
}
function LoadBuffer ()
{
var trickname = imageUrl;
++counter;
trickname += "?counter=" + (random + counter);
buffer.src = trickname;
buffer.onload = DisplayImage;
}
function LoadNextImage()
{
setTimeout("LoadBuffer()", delay);
}
LoadNextImage();
</script>
</body>
</html>
On first sight, your "setTimeout"-call seems to be wrong:
Try
function LoadNextImage()
{
setTimeout(function() {LoadBuffer()}, delay);
}
Also, your body.onload has a wrong call, it says "DispayImage" and not "DisplayImage", but that might be a copy-paste error on your end.
Edit: Just tested the corrected code myself, and here it works (used some local images). One last error I found was that you don't close the "language"-tag:
<script language="JavaScript>
should be
<script language="Javascript">
Or, even better, the "language"-tag is not needed, all browsers use javascript as default when you use "script":
<script>/*Some code here*/</script>
Related
Have someone found how to make a similar webserver as the default IoT Core one? The most similar example found is this but when I try to insert some javascript in the page, is not recognized. In the default webserver of the IoT Core there are a lot of js and jQuery scripts that runs very well.
Someone have ideas please?
Thanx a lot
Based on this sample, you can add a HTML file to your project and use this HTML file host the content of the web page, then insert some javascript in it.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Background Message</title>
</head>
<body>
Hello from the background process!<br />
<script type="text/javascript">
var myVariable = 'Hello, I come from script!';
window.alert(myVariable);
</script>
</body>
</html>
You need edit part of code like this:
using (var response = output.AsStreamForWrite())
{
string page = "";
var folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
var file = await folder.GetFileAsync("index.html");
var readFile = await Windows.Storage.FileIO.ReadLinesAsync(file);
foreach (var line in readFile)
{
page += line;
}
page += query;
byte[] bodyArray = Encoding.UTF8.GetBytes(page);
var bodyStream = new MemoryStream(bodyArray);
var header = "HTTP/1.1 200 OK\r\n" +
$"Content-Length: {bodyStream.Length}\r\n" +
"Connection: close\r\n\r\n";
byte[] headerArray = Encoding.UTF8.GetBytes(header);
await response.WriteAsync(headerArray, 0, headerArray.Length);
await bodyStream.CopyToAsync(response);
await response.FlushAsync();
}
After deploying your app to Raspberry Pi, while the app running, you can visit the web server. The result will look like this:
I try to understand Ajax. I'd like to understand how the data and commands flow in the code. I have the following code. Please, read my comments in this code. The comments describe, how I understand the code. The problem is marked as PROBLEM!!! Important notice: The code is working, I only try to understand the code.
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF-8" />
<TITLE>Test02</TITLE>
</HEAD>
<BODY>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<SCRIPT>
function loadDoc() {
// select right object
function createXhttp(){
var variable;
if (window.XMLHttpRequest) {
// code for modern browsers
variable = new XMLHttpRequest();
} else {
// code for IE6, IE5
variable = new ActiveXObject("Microsoft.XMLHTTP");
}
return variable;
}
var xhttp = createXhttp();
// check the state
xhttp.onreadystatechange = function (){
// if the response is ready and file or url exists
if (xhttp.readyState == 4 && xhttp.status == 200) {
/* display the text in console - but which text if xttp.open
with source file is opened on the next line? (PROBLEM!!!)*/
console.log(xhttp.responseText);
}
};
// use method get and load the content of ajax_info.txt
xhttp.open("GET", "ajax_info.txt", true);
// send the request above
xhttp.send();
}
</SCRIPT>
</BODY>
</HTML>
Thank you for your advice.
but which text if xttp.open with source file is opened on the next line?
Let's take another example.
document.getElementById('some_button').onclick = function () {
console.log(document.getElementById("some_text_box").value);
}
It doesn't matter if the user hasn't typed anything in some_text_box at this point, because the function won't run until some_button is clicked.
Now back to XHR:
xhttp.onreadystatechange = function (){
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log(xhttp.responseText);
}
};
… it doesn't matter that the request hasn't been sent yet, because the function won't run until the response arrives.
(OK, it will run every time the ready state changes, but the if statement means the meat of it won't run until the response arrives).
I have a map.html file that contains a script for google maps api v3, i've been trying previously trying to run this script using the webbrowser1.DocumentText and Webbrower1.Document.InvokeScript been unsuccessful.
This time i have the map.html hosted on a website, My objective is been able to modify this html file and then run it on my windows application in order to display a desired address.
below is the code of the map.html which is hosted ex: http://url.com/map.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 16,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//var address = document.getElementById("address").value;
var address = "Miami Beach, Flordia" //Address to modify in order to display
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
if you copy and paste this code in a html it should display Miami Beach, FL
now on my windows application i want to edit this html that is hosted on a website i want to change Miami Beach, Florida to Naples,Florida as an example.
then use a webbrowser on my windows application and display it as Webbrowser1.Navigate("http://url.com/map.html")
your help is very appreciated it.
I did found how to modify an html when it is saved locally on my computer but for what i exactly need this is not a viable way.
thank you,
Leo P.
I would not try to modify the html code. Since the Google Maps code is all JS, I would write a JS function to move the map to the new location.
You can call that function from your application (or even insert it from there).
using mshtml;
//First, navigate to your page:
Webbrowser1.Navigate("http://url.com/map.html")
void Webbrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
//Then call your move function with the new target:
mshtml.IHTMLDocument2 doc = (mshtml.IHTMLDocument2)Webbrowser1.Document.DomDocument;
mshtml.IHTMLWindow2 window = (mshtml.IHTMLWindow2)doc.parentWindow;
window.execScript("yourMapMoveFunction('Naples,Florida');");
}
BTW, your link does not show a map...
I'm developing FF extension and plugin that work in tandem. My Extension injects npapi plugin into the html and calls some method of the plugin after an event occures.
Here is the code I use for injection:
if (window.content.document.getElementById("rondyoHookMessageElement") == null) {
var element = window.content.document.createElement("object");
element.type = "application/x-hook-msg";
element.id = "rondyoHookMessageElement";
element.width = 0;
element.height = 0;
window.content.document.body.appendChild(element);
}
And when I need to use a method of the plugin I do the following:
var element = window.content.document.getElementById("rondyoHookMessageElement");
element.SomeFunc();
I confirm that element is found, but logging the element.SomeFunc returns undefined.
If I inject the npapi plugin manually:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body>
<object id="plugin" type="application/plugin-mime" width=200 height=200 border=5></object>
<script type="text/javascript">
var plugin = document.getElementById("plugin");
dump(plugin.SomeFunc + "\n");
</script>
</body>
</html>
It returns function SomeFunc() { [native code] }
OS: Mac OS X 10.6.7
FF: 3.6.13
If you do this in FireFox 4 you have a decent chance of crashing the browser (the bug has been logged, but not yet fixed). it's not a good idea to set the type of the object tag before injecting it into the DOM; you'll get different behavior on each browser. Wait until you've put the object into the dom and then inject it.
Another possible problem is that it sometimes takes the browser some time after injecting it into the DOM before the plugin is accessible, so if you use a setTimeout to wait for a half second or so it might start working at that point.
I solved the problem by extending script which make a call of the SomeFunc:
if (window.content.document.getElementById("rondyoHookMessageElement") == null) {
var element = window.content.document.createElement("object");
element.type = "application/x-hook-msg";
element.id = "rondyoHookMessageElement";
element.width = 0;
element.height = 0;
window.content.document.body.appendChild(element);
var script = doc.createElement("script");
script.type = "text/javascript";
script.innerHTML = 'function f(doc, messageId, data) { document.getElementById("rondyoHookMessageElement").SomeFunc(doc, messageId, data); };';
doc.body.appendChild(script);
}
When I need to call this function from the extension I do:
window.content.document.defaultView.wrappedJSObject.f(null, mes, false);
When I try to get the contents of a htm file into a div using a xmlhttprequest object in Firefox it includes everything, but in IE it only includes the contents of the body tag. In other words it ignores all the styling (in the head tag) of the page, rendering it ugly.
Is it possible to get the full page when using xmlhttprequest in internet explorer?
edit:
document.getElementById('divtoreceivetheresponse').innerHTML = xmlHTTP.responseText
This line in FF gets the page contents including the <head></head> section.
In IE it just gets the contents inside the <body></body> section.
I got an answer from elsewhere. Basically it does include all the page (not just the body) but IE chooses not to render it (probably the correct behavour)
I therefore worked out some code to extract the css, place it in the head, and place the body stuff in the target div. So both html and css from the external page would be got.
<html><head>
<script type="text/javascript" language="javascript">
function include(lyr,url)
{
if (document.all)
{
try {
var xml = new ActiveXObject("Microsoft.XMLHTTP");
xml.Open( "GET", url, false );
xml.Send()
}
catch (e) {
var xml = new ActiveXObject("MSXML2.XMLHTTP.4.0");
xml.Open( "GET", url, false );
xml.Send()
}
}
else
{
var xml=new XMLHttpRequest();
xml.open("GET",url,false);
xml.send(null);
}
text = xml.responseText;
text = text.replace("<html>","");
text = text.replace("</html>","");
text = text.replace("<head>","");
text = text.replace("</head>","");
text = text.replace("<body>","");
text = text.replace("</body>","");
splittext = text.split("<style type=\"text/css\">");
splittext = splittext[1].split("</style>");
css = splittext[0];
everythingelse = splittext[1];
addCss(css);
document.getElementById(lyr).innerHTML=everythingelse;
}
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
</script>
</head>
<body onload="include('adiv','test.htm')">
<div id="adiv">sdfgboui hsdguhwruh o ikuy </div>
</body>
</html>
The code is far from perfect, but it does the job and I will probably improve the code bit by bit now that I know it works