Hello all-
This is what im trying to achieve. At the top of my page there is some
search functionality, through which you cause to be loaded a string
representing an HTML page. Below this and occuupying about 80% of the
window real estate, there is a DIV. There is also a toggle button with
two options "Code View" and "Text View" as I have named them. Depending
on which mode you are in, you can see the block of HTML either as code
(in other words the tags are not rendered. You see the HTML as it
exists.) or as text (rendered HTML). Consider the following code, which
is a simplified version of the page.
<script language="javascript">
var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";
function ViewDoc()
{
if(mode == "code")
document.getElementById("docArea").innerText = s;
else
document.getElementById("docArea").innerHTML = s;
}
function ChageMode()
{
if(mode == "code")
mode == "text";
else
mode == "code";
}
</script>
<HTML><BODY>
<table>
<tr>
<td>
<input type='button' onclick='ViewDoc()' value='View Document'>
<input type='button' onclick-='ChangeMode() value='Change Mode'>
</td>
</tr>
</table>
<div id='docArea'/>
</BODY></HTML
The variable s contains an actual example of some HTML im trying to
load here (with the contents of the stylesheet omitted.)
Now, the following works fine in Internet Explorer. It does not work at
all in Mozilla Firefox. In firefox, for example, I have to cut out the
stylesheet, or the entire page goes fubar. Without the embedded
stylesheet, the "text" view (rendered html) works just fine. But the
"innerText" does not work in Firefox, and im not sure how to replicate
it.
Thanks in advance- 7 27096
Hoss said on 27/03/2006 8:59 AM AEST: Hello all-
This is what im trying to achieve. At the top of my page there is some search functionality, through which you cause to be loaded a string representing an HTML page. Below this and occuupying about 80% of the window real estate, there is a DIV. There is also a toggle button with two options "Code View" and "Text View" as I have named them. Depending on which mode you are in, you can see the block of HTML either as code (in other words the tags are not rendered. You see the HTML as it exists.) or as text (rendered HTML). Consider the following code, which is a simplified version of the page.
<script language="javascript">
The language attribute is deprecated, type is required:
<script type="text/javascript">
var mode = "code"; var s = "<html><head> <style type="text/css"> My Stylesheet </style> <title> MyTitle </title> </head> <body>";
You can't have newlines in string literals. If the above works at all,
it is due to error correction. I think what you want is:
var s = "<html><head><style type='text/css'>"
+ "My Stylesheet</style><title>MyTitle</title>"
+ "</head><body>";
That will create a 'valid' JavaScript variable called 's', but the
content of s is not valid HTML. Also, even if you make it valid, a
document can only have one body, head and title element so when added to
the document as HTML it will make it invalid. function ViewDoc() { if(mode == "code") document.getElementById("docArea").innerText = s;
innerText is not widely supported outside IE. Cross-browser solutions
have been posted, search the archives for 'innerText textContent innerHTML'
else document.getElementById("docArea").innerHTML = s;
And now you have an invalid document if 's' contains a title, body or
head element.
[...]
load here (with the contents of the stylesheet omitted.) Now, the following works fine in Internet Explorer. It does not work at all in Mozilla Firefox. In firefox, for example, I have to cut out the stylesheet, or the entire page goes fubar. Without the embedded stylesheet, the "text" view (rendered html) works just fine. But the "innerText" does not work in Firefox, and im not sure how to replicate it.
Thanks in advance-
Using innerHTML and a regular expression to remove tags:
function getText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
return el.innerHTML.replace(/<[^>]*>/g,'');
}
Using recursion rather than innerHTML or regular expression:
function getText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
return getText2(el);
function getText2(el) {
var x = el.childNodes;
var txt = '';
for (var i=0, len=x.length; i<len; ++i){
if (3 == x[i].nodeType) {
txt += x[i].data;
} else if (1 == x[i].nodeType){
txt += getText2(x[i]);
}
}
return txt.replace(/\s+/g,' ');
}
}
--
Rob
I guess my first post was a little insufficient.
The "s" variable does not in fact have newlines in it- it would have
been better represented the way you put it. That will create a 'valid' JavaScript variable called 's', but the content of s is not valid HTML. Also, even if you make it valid, a document can only have one body, head and title element so when added to the document as HTML it will make it invalid.
If this be true, what would be a good way to achieve what im trying to
do? I need to dynamically write an HTML page to an element on my page.
I could use an <iframe>, but then you get problems with dynamically
sizing the height. In any case, the way im describing it (using a DIV)
works perfectly fine in both IE, and Firefox too as long as you cut
out the embedded stylesheet. The only problem is in displaying the HTML
un-rendered into a div in firefox.
Using innerHTML and a regular expression to remove tags:
Removing the tags defeats the purpose of the entire thing. Im trying to
display the HTML as "code." or exactly what youd see if you wrote it to
a file and loaded it up in Notepad.
Hoss said on 27/03/2006 1:58 PM AEST: I guess my first post was a little insufficient.
The "s" variable does not in fact have newlines in it- it would have been better represented the way you put it.
That will create a 'valid' JavaScript variable called 's', but the content of s is not valid HTML. Also, even if you make it valid, a document can only have one body, head and title element so when added to the document as HTML it will make it invalid.
If this be true, what would be a good way to achieve what im trying to do? I need to dynamically write an HTML page to an element on my page. I could use an <iframe>, but then you get problems with dynamically sizing the height.
What is your issue with height? You can set the height of an iFrame to
whatever you want.
Your other options are a frame or a pop-up, neither of which are
particularly liked but there you go.
In any case, the way im describing it (using a DIV) works perfectly fine in both IE, and Firefox too as long as you cut out the embedded stylesheet.
You are depending on your browser to 'fix' the invalid document. You
can't be sure that all browsers will do it the same, or that all
browsers will continue to do it consistently.
The only problem is in displaying the HTML un-rendered into a div in firefox.
Because Firefox doesn't support innerText. Using innerHTML and a regular expression to remove tags:
Removing the tags defeats the purpose of the entire thing. Im trying to display the HTML as "code." or exactly what youd see if you wrote it to a file and loaded it up in Notepad.
I did that to emulate your use of innerText which removes all the tags.
--
Rob
RobG wrote: Hoss said on 27/03/2006 8:59 AM AEST: Consider the following code, which is a simplified version of the page.
.... var mode = "code"; var s = "<html><head> <style type="text/css"> My Stylesheet </style> <title> MyTitle </title> </head> <body>";
You can't have newlines in string literals. If the above works at all, it is due to error correction. I think what you want is:
var s = "<html><head><style type='text/css'>" + "My Stylesheet</style><title>MyTitle</title>" + "</head><body>";
<span id=foo onclick="alert('But don\'t \
forget to\
 mention \n\
"this"')">Click me</span>
Csaba Gabor from Vienna
[sorry in case you see this twice - my earlier post was overquoting]
RobG wrote: Hoss said on 27/03/2006 8:59 AM AEST: Consider the following code, which is a simplified version of the page.
.... var mode = "code"; var s = "<html><head> <style type="text/css"> My Stylesheet </style> <title> MyTitle </title> </head> <body>";
You can't have newlines in string literals.
....
<span id=foo onclick="alert('But don\'t \
forget to\
 mention \n\
"this"')">Click me</span>
Csaba Gabor from Vienna I did that to emulate your use of innerText which removes all the tags.
I am sorry, that is incorrect. I am using innerText and it is
displaying the document tags and all. In other words if my string =
"<HTML><HEAD><BODY>" and I say div.innerText = string then this is what
is displayed on the screen
<HTML><HEAD><BODY>
Hoss said on 28/03/2006 3:21 AM AEST: I did that to emulate your use of innerText which removes all the tags.
I am sorry, that is incorrect. I am using innerText and it is displaying the document tags and all. In other words if my string = "<HTML><HEAD><BODY>" and I say div.innerText = string then this is what is displayed on the screen
<HTML><HEAD><BODY>
Ahh, now I see what you are doing - sorry, I was completely on the wrong
track. For all browsers, including IE, use:
var p = document.createElement('pre');
p.appendChild(document.createTextNode(s));
document.getElementById("docArea").appendChild(p);
which will work in any DOM 1 compliant browser, so virtually anything
after IE/NN 4 and certainly anything that supports getElementById.
The use of the 'pre' element isn't essential but it preserves line breaks.
--
Rob This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Jake Barnes |
last post by:
I wanted to teach myself AJAX this weekend so I sat down with Stuart
Landgridge's book and I started to play around. I came up with a little
page that you can add text and images to. You can see it...
|
by: Jake Barnes |
last post by:
This weekend I wanted to learn AJAX, so I set up a little toy page
where I could experiment. The idea of this page is that you click in
one of the boxes to get some controls, at which point you can...
|
by: SimonV |
last post by:
Hmm, I let the user add more input fields as needed. But I have a
strange problem with ff (and other mozillas)
When I add a field in ff, the others lost their content...
In IE the content stays...
|
by: Angel |
last post by:
I have an application with heavy usage of DOM
Initially the application was supposed to be only IE specific, but now
we need to support it for Firefox also.
As an example consider the...
|
by: MaryA |
last post by:
Let me preface this with the fact that I am a newbie to HTML, XML and
Javascript. Having said that, let me explain my dilemma:
I am having a difficult time getting innerHTML to consistently...
|
by: Capricorn |
last post by:
Hi,
can anybody tell me how you can create a new stylesheet inside a
(X)HTML page with JavaScript and Firefox, if the stylesheet is only
available as a variable value, like:
var CSSStyle =...
|
by: sonic |
last post by:
Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I...
|
by: Henry |
last post by:
Hi
I have a problem, pls see below:
<html>
:
<script type="text/javascript">
<!--
function addCode () {
document.getElementById('emptySpace').innerHTML+=
|
by: martymix |
last post by:
simple question:
I have a simple <dt>test text</dt>
I get the innerHTML of that dt, and I try and append some text to it
like so:
dt = document.getElementsByTagName('dt')
var text =...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM).
In this month's session, the creator of the excellent VBE...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: Aftab Ahmad |
last post by:
Hello Experts!
I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: marcoviolo |
last post by:
Dear all,
I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
| |