Update Text Inside Page With Image - javascript

I am working with Delphi7 and TEmbeddedWB. I have some difficulty to update text of a page in twebbrowser. Because that webpage contains images. So Complete Html code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'#$D#$A'
<HTML>
<HEAD>'#$D#$A'
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>'#$D#$A'
<META name=GENERATOR content="MSHTML 8.00.7601.17514">
</HEAD>'#$D#$A'
<BODY>'#$D#$A'
<DIV align=center><**IMG '#$D#$A'src="file:///C:/Program%20Files/image/c.jpg"></DIV>
<FONT '#$D#$A'size=2 face=Arial><SPAN style="FONT-FAMILY: Arial; FONT-SIZE: 10pt">'#$D#$A'<P>**Hello «Forename», '#$D#$A'thiss<BR><BR><BR>«signature»<BR>**</P></SPAN></FONT>
</BODY>
</HTML>'#$D#$A.
So I need to update only text like from (Hello «Forename» this «signature») to (this is a demo page). When I go to set Doc.Body.innerText := this is a demo page. Then On showing page image does remove, only text is display.
Please tell me how would be update text inside page with image. Please help me

Maybe you can use the StringReplace function of Delphi to replace the text in the HTML of the browser, so something like:
Doc.Body.innerHTML := StringReplace(Doc.Body.innerHTML, '«signature»', 'Your Signature', []);
innerHTML should return the body contents, including all elements, while innerText only gets the text, without markup.
A nicer way would be to use methods like getElementById and other similar methods that you have available in e.g. Javascript, but I don't know if those methods are exposed by TEmbeddedWB.

Related

HTML equivalent of PHP include for JavaScript parts

I'm looking for a Javascript equivalent of a technique I've been using in PHP. That is, to place even the most basic page setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
...in a php file like 'doc_start.php' and then start every page in my site with...
<?php require_once('/path/to/doc_start.php); ?>
Now I need to begin a project that's strictly HTML and JS (no PHP) and want a similar way to avoid duplicating basic, common HTML elements. Obviously, I want to do more than this very basic stuff, like import JQuery in every page, link to a common stylesheet, etc. Again, all easy in PHP, but I'm still kind of a newbie in JS.
I've read about HTML5 includes, but can't seem to find anything that addresses what I want to do
In order to import other pages into your current document, you need to use a link tag.
For example....
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
This will allow you to reference other html, css or javascript documents into your page without copying and pasting the same code within each page.
https://www.w3schools.com/html/html_links.asp
Javascript and PHP are different languages for very different purposes. But assuming you have some element you don't want to repeat some elements one solution is the following:
Save the HTML elements that you don't want to keep repeating as a string. Then use the .innerHTML property to add elements.
The .innerHTML property stores the mark up of an element as a string.
For example, if we have the following <div>:
<div class="example"> <br> Hello there this is a test! </div>
...and we use .innerHTML:
console.log(document.querySelector(".example").innerHTML);
It will output "<br> Hello there this is a test!".
We can add to the .innerHTML using the += operator. So if you want to add something inside the body it's as simple as:
var something = "some HTML";
document.body.innerHTML += something;
Hope this was what you were looking for!

How to display a complete html page when I have it's source html in iframe?

I want to display another html page on my html page, that html page is generated. So I don't have it's src, only the content. It has doctype, head, body, all stuff. So I decided to use iframe. The problem is that I can't assign the whole text to a variable, as I get errors, that there is an unsupported character, like "<" etc. How to deal with it?
I'm trying to do something like this:
window.onload = function() {
var iframeDocument = document.getElementById("myIframe").contentDocument;
var ss = "
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
</head>
<body>
</body>
</html>";
iframeDocument.write(ss);
iframeDocument.close();
}
So my problem is how to escape that text so it won't cause browser errors?
Also html content is generated dynamically, so in my code there is no that text, there is struts action variable. But after my code gots executed in browser, that's what I see in there.
The easiest way to solve this is to create a new aspx page, that creates that html you need in your iframe and set the src of the iframe to that aspx page (or php, depends on what you are using).
So lets say you create a new aspx page called Frame.aspx. You then add <iframe src="Frame.aspx?SomeParameter=SomeValue" /> to your parent window.
This is a much nicer approach and much more maintainable. Also it prevents having the iFrame contents twice (once in your javascript variable and once as content of the iframe).

Stylesheet ignored when using body onload and document.write

I am messing around with JavaScript experimenting to get a feel for it and have already hit a problem. Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="testing.js"></script>
</head>
<body onload="writeLine()">
</body>
</html>
Here is the JavaScript testing.js:
function writeLine()
{
document.write("Hello World!")
}
Here is the style sheet styles.css:
html, body {
background-color: red;
}
So a very simple example, but I may have chose an awkward example, using on-load in a body tag. So the code above loads and runs the function, but the style sheet does nothing, unless I remove the script tags in the head. I have tried putting the script tags everywhere else, but nothing works. I have researched on-line how to properly link to JavaScript files, and have no found no clear solution, can anyone point out my error?
I have used JavaScript before, but I want a clear understanding from the beginning before I use it any longer
You cannot use document.write after the document is closed (which it will be when onload fires) without destroying the existing document (including links to stylesheets).
Instead, use DOM manipulation, which is covered by chapters 8 and 9 of the W3C JavaScript Core Skills.
Your problem is with the document.write() called in a wrong moment*. This method prints given text at current place in the page as was intended to work while the page still loads. Because you are calling it when the whole page was loaded, the results are unexpected (undefined?)
Instead you should manipulate the dom tree directly:
function writeLine() {
var text = document.createTextNode("Hello World!");
document.body.appendChild(text);
}
Actually in Opera browser I see red background for few milliseconds and then it goes back to white. Try commenting out document.write() - the background is as expected. Moreover you should include <script> tag at the end of body, but this won't solve your problem.
* to be honest, there is no good moment for calling document.write(), avoid it
In your particular example it doesn't matter where the script tag is added as the document.write command executes after the content is rendered, overwriting the existing content.
If you add an alert before overwriting the content you can see your page is red before it gets overwritten with Hello World.

Javascript to rotate between pages within ONE HTML page

I would like some help displaying contents (to different pages) within one HTML page using JavaScript.
This is a sample of what I have found so far: http://www.swan10.nl/stuff/test.htm however instead of displaying "FAQ question #blabla" in the box every time a link is clicked, I would like to display words and images like a normal content. Is there a way to do this?
I tried removing the CreateDiv function and replacing it with HTML codes but it doesn't work.
Thank you in advance :)
Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE
After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.
Using jQuery it's as simple as
$('#divname').load('/path/to/file.html');
Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).
I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.
Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV#db {
border : 1px solid blue;
width : 400px;
height : 400px;
}
</style>
<script type="text/javascript">
var Content = new Array();
Content[0] = '<i>test1</i>';
Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
Content[2] = '<u>test3</u>';
Content[3] = '<s>test4</s>';
function Toggle(IDS) {
document.getElementById('db').innerHTML = Content[IDS];
}
</script>
</head>
<body onLoad="Toggle(0,10)">
FAQ #1
FAQ #2
FAQ #3
FAQ #4
<p />
<div id="db"></div>
</body>
</html>
I updated it to work all javascripty with the innerHTML

How can I do a script to catch strings as input and open them on a firefox document?

How can I do a script to catch strings as input and open them on a Firefox document? Each link would go to a different window or tab. Any ideas would be much appreciated.
I just want to be able to take some links and open them. For example I have 50 Links. And copying and parsing those 50 Links take a really long time and also a lot of work. If I can just write a script to read those links and let the computer do the work, it will be very helpful for me. I just don't know how to write that or where because it does not sound too hard (just gotta know how to). Thanks for any suggestions.
if i got you right, i guess you could do something like this. This will open the four urls listed but it will probably be blocked by the popup blocker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
<!--
var dir = new Array();
dir[0] = "http://www.creativecorner.cl/";
dir[1] = "http://www.sourcing.cl/";
dir[2] = "http://www.feeds.cl/";
dir[3] = "http://www.neonomade.com/";
for(i = 0 ; i < dir.length ; i++){
window.open(dir[i],'autowindow' + i,'width=1024,height=768');
}
-->
</script>
</body>
</html>
Write this to a file names "links.html" on your hard disk:
<html>
<head><title>Your links</title></head>
<body>
Your links:<br />
XXX<br />
</body>
</html>
Replace the two "XXX" with one link and emit one "link" (a) line per link. You should be able to do that in most text editors with a little search'n'replace. After you're done, save the file and open it in your browser.
Another option is to look at the bookmark file of your browser and to duplicate the format. You can usually ignore things like "last visited", etc. Just add the links.
If you want to do this in JavaScript, you will need to use a form with a textarea. Create a small HTML document with a form, the JavaScript, the textarea and a div for the result.
Add a button which calls a JavaScript function which takes the text from the textarea, split it into lines and create the HTML above (only the link-lines) as a String. Now assign this string to the attribute innerHTML of the div to make the links clickable.

Categories