脚本生成的代码显示不同于静态显示的完全相同的代码...帮助！？！？！ [英] Script-generated code displaying differntly than the exact same code displayed staticly... help!?!?!
问题描述
嘿那里，
这里的好奇心问题...
这是测试代码（它'''不是很长）...它是显示一个带有标题的大量
图像链接，理想情况是从
外部文件中拉出（该部分'不在这里 - 突出问题代码）：
-------- BEGIN CODE PAGE ------------
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：//www.w3.org/tr/xhtml1 /DTD/xhtml1-transitional.dtd">
< html>
< head>
< title> Test< / title>
< script type =" text / javascript">
function testSpans（sbody）{
var sp，i， j，oneRecord;
sbody = document.getElementById（sbody）;
for（i = 0; i< = 1; i ++）{
var bkSpan，bkAa，bkAb，bkAex，bkImg，bkTitle，
bkTypea，bkTypeb，txt，br;
txt =" Text Text&qu ot ;;
testImg = document.createElement（" img"）;
testImg.setAttribute（" src"，
" images / test.gif"）;
testA = document.createElement（" a"）;
testA.setAttribute（" href"，
" test / url / index.htm"）;
testA.appendChild（testImg）;
br = document.createElement（" br"）;
testA.appendChild（br）;
testText = document.createTextNode（txt）;
testA.appendChild（testText）;
testSpan = document.createElement（" span"）;
testSpan.setAttribute（" id"，i）;
testSpan.style.display =" inline";
testSpan.style.width =" 100px";
testSpan.appendChild（testA）;
sbody。 appendChild（testSpan）;
}
}
函数init（）{
testSpans（''scoobyDoo' '）;
}
< / script>
< / head>
< body onload =" init（）">
< h1>测试< / h1>
< hr / >
< table>< tr>< td id =" scoobyDoo">< / td>< / tr>< / table>
< / body>
< / html>
-------- END CODE PAGE ----------- -
当它显示时，< span>'不会排在同一行，如
他们应该：
图像图片
文本文本
相反，它好像第一个跨度永远不会结束......来自
秒范围的图像显示在第一个文本之后，如下所示：
IMAGE
text IMAGE
text
使用MSIE''查看部分源' powertoy，我可以看到
生成的HTML如下：
--------开始生成的HTML ------ ------
< H1>测试< / H1>
< HR>
< TABLE> ;
< TBODY>
< TR>
< TD id = scoobyDoo>< SPAN id = 0 style ="显示：内联;宽度：100px">< A
href =" test / url / index.htm">< IMG height = 30 src =" images / test.gif"
width = 28>< BR>文字
文字< / A>< / SPAN>< SPAN id = 1 style =" DISPLAY：inline;宽度：100px">< A
href =" test / url / index.htm">< IMG height = 30 src =" images / test.gif"
width = 28>< BR>文字
文字< / A>< / SPAN>< / TD>< / TR>< / TBODY>< /表>
-------- END GENERATED HTML ------------
问题在于*这是正确的！*将此代码放在一个页面中
显示完美，但它不会由上面显示的JavaScript
生成。
任何人都有任何想法？一个有用的CSS标签？另一种
动态创建此数据的方法是什么？任何事情都会受到赞赏......
- 阿克巴
Akbar< me @ here.com>写道：
-------- BEGIN CODE PAGE ------------
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：//www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
我看到你使用DOCTYPE将IE置于标准模式。
显示时，< span>'不要他们应该在同一条线上排队：
IMAGE IMAGE
文字文字
他们不应该使用您生成的代码，而不是标准模式。
< SPAN id = 0 style =" DISPLAY：inline;宽度：100px>
我在这里看到了一个问题。 CSS宽度属性对内联块应该没有
效果。
问题是*这是正确的！*将此代码放在页面中
显示完美，
如果通过此代码你的意思是上面的，然后注意你没有
DOCTYPE将浏览器置于标准模式。添加它，IE
将以与使用Javascript生成它时相同的方式显示它。
任何人都有任何想法？一个有用的CSS标签？另一种动态创建数据的方法是什么？任何事情都会被赞赏...
使块显示：block和float：left。然后他们会按照你想要的方式排队
。或者将它们放入单独的td'。
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D''HTML：< URL：http：//www.infimum.dk/HTML /randomArtSplit.html>
''没有判断的信仰只会降低精神神圣。''
Akbar写道：嘿那里，
这里的好奇心问题......
这里是测试代码（它不是那么久）......它要显示大量带有标题的图像链接，理想情况是从外部文件中拉出（该部分不在此处 - 突出显示问题代码）：
<
--------开始代码页------------
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：//www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
< head>
我通常将这些行添加到xhtml文件中：
< meta http-equiv =" Content-Type"含量=" text / html的;字符集= ISO-8859-1" />
< meta http-equiv =" Content-Language"含量=" EN-US" />
< meta http-equiv =" Content-Style-Type"含量="文本/ CSS" />
< meta http-equiv =" Content-Script-Type"含量="文本/ JavaScript的" />
< title>测试< / title>
< script type =" text / javascript">
function testSpans（sbody） {
"在XHTML中，脚本和样式元素被声明为具有#PCDATA
内容。结果，<和&将被视为标记的开始，
和诸如& lt;之类的实体和& amp;将被XML处理器识别为实体
引用<和&分别。在CDATA标记的部分中包含脚本或样式元素的
内容
避免扩展这些实体。
http://www.w3.org/TR/2002/REC- xhtml1-20020801 /＃h-4.8
所以，如果你使用<或者&在你没有标记的CDATA功能中，它将被处理并被视为标记。
< script type =" text / javascript">
<！[CDATA [
....未转义的脚本内容......
]]>
< / script>
是我建议的，因为你使用<在你的代码中。
var sp，i，j，oneRecord;
sbody = document.getElementById（sbody）;
for（i = 0; i< = 1; i ++）{
就在这里，我们看到<。
var bkSpan，bkAa，bkAb，bkAex，bkImg，bkTitle，
bkTypea ，bkTypeb，txt，br;
txt =" Text Text" ;;
testImg = document.createElement（" img"）;
testImg.setAttribute（" src"，
" images / test.gif"）;
不值此推荐。只有当没有
其他属性可用时才应使用setAttribute。在这里，简单的
testImg.src =" images / test.gif" ;;
有效。
http：// www .w3.org / TR / DOM-Level-2-HTM ... ml＃ID-87762984
testA = document.createElement（" a"）;
testA.setAttribute（" href"，
" test / url / index.htm"）;
testA.href =" test / url / index.htm";
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID -88517319
testA.appendChild（testImg）;
br = document.createElement（" br"）;
testA.appendChild（br）;
testText = document.createTextNode（txt）;
testA.appendChild（testText）;
或
testA.appendChild（document.createTextNode（txt））;
testSpan = document.createElement （" span"）;
testSpan.setAttribute（" id"，i）;
testSpan.id = i;
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-63534901
testSpan.style.display =" inline" ;;
每个定义，span是一个内联元素。所以，这里不需要
。
testSpan.style.width =" 100px";
testSpan.appendChild（testA）;
sbody.appendChild（testSpan）;
}
}
函数init（）{
testSpans（''scoobyDoo''）;
}
< / script>
< / head>
< body onload =" init（）">
< h1>测试< / h1>
< hr />
< table>< tr>< td id =" scoobyDoo">< / td>< / tr>< / table>
< / body>
< / html>
--------结束代码页------------
当它显示时，< span>'不会排在同一行，如
他们应该：
图像图像
文本文本
相反，就好像第一个跨度永远不会结束......
第二个跨度的图像显示在第一个跨度的文本之后，如下所示：
图片
文字图片
使用MSIE'&qu ot;查看部分来源 powertoy，我可以看到
生成的HTML如下：
-------- BEGIN GENERATED HTML ------------
< H1>测试< / H1>
< HR>
<表>
< TBODY>
< TR>
< TD id = scoobyDoo>< SPAN id = 0 style =" DISPLAY：inline;宽度：100px">< A
href =" test / url / index.htm">< IMG height = 30 src =" images / test.gif"
width = 28> ;< BR>文字
文字< / A>< / SPAN>< SPAN id = 1 style =" DISPLAY：inline;宽度：100px">< A
href =" test / url / index.htm">< IMG height = 30 src =" images / test.gif"
width = 28> ;< BR>文字
文字< / A>< / SPAN>< / TD>< / TR>< / TBODY>< / TABLE>
------ --END生成的HTML ------------
问题在于*这是正确的！*将此代码放在页面中
显示完美，但它不是由上面显示的JavaScript生成的。
任何人都有任何想法？一个有用的CSS标签？另一种动态创建数据的方法是什么？任何事情都会受到赞赏......
- Akbar
2其他建议：
- 写一个简短的但是你帖子中有意义的主题。只是
脚本生成的代码显示不同足够了
- 尝试上传你的代码，页面某处然后只是给网址;
这总是更好，更方便代码可以
用各种软件测试（验证，验证http标题，链接
验证器，辅助功能验证器等等。）
DU
-
Javascript和浏览器错误：
http://www10.brinkster.com/doctorunclear/
- Netscape 7.x用户和作曲家的资源，帮助和提示
- 在Netscape 7.x中弹出窗口，音乐（音频/ midi）的交互式演示
http://www10.brinkster.com/doctorunc...e7Section.html
DU，
很多很棒的信息！谢谢！一些问题......
On Sun，2003年9月7日15:11:56 -0400，DU< dr ******* @ hotREMOVEmail.com>
写道：
所以，如果你使用<或者&在你没有标记的CDATA功能中，它将被处理并被视为标记。
< script type =" text / javascript">
<！[CDATA [
...未转义的脚本内容......
]]>
< / script>
是我建议的，因为你使用<在你的代码中。
var sp，i，j，oneRecord;
sbody = document.getElementById（sbody）;
for（i = 0; i< ; = 1; i ++）{
就在这里，我们看到<。
试过这个，现在IE抛出语法错误。 ：（（在Opera7中，它没有; t
做任何事情......嗯。也没有其他页面可以工作
罚款..嗯嗯。）
testImg.setAttribute（" src"，" images / test.gif"）;
不推荐。只有在没有
其他属性的情况下才能使用setAttribute。这里，简单的
testImg.src =" images / test.gif";
工作。
谢谢！我== newb。大部分来自O''Reilly食谱。
通过实例学习。 ..
testSpan.style.display =" inline" ;;
每个定义，一个跨度这是一个内联元素。所以，这里不需要
。
这是我在尝试任何可能有用的东西来修复
它......
2其他建议s：
- 在帖子中写一个简短但有意义的主题。只是
脚本生成的代码显示不同已经足够了
''kay。
- 尝试上传你的代码，在某处上传页面，然后只需提供网址;
即可总是更好，更方便，因为代码可以使用各种软件进行测试（验证，验证http标头，链接
验证器，辅助功能验证器等）。
< br $> b $ b''kay
再次感谢！
- Akbar
Hey there,
Big-time curiosity issue here...
Here''s the test code (it''s not that long)... it''s to display a large
number of image links with captions, ideally pulled in from an
external file (that part''s not here -- spotlighting the problem code):
--------BEGIN CODE PAGE------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody) {
var sp, i, j, oneRecord;
sbody = document.getElementById(sbody);
for (i = 0; i <= 1; i++) {
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.createElement("img");
testImg.setAttribute("src",
"images/test.gif");
testA = document.createElement("a");
testA.setAttribute("href",
"test/url/index.htm");
testA.appendChild(testImg);
br = document.createElement("br");
testA.appendChild(br);
testText = document.createTextNode(txt);
testA.appendChild(testText);
testSpan = document.createElement("span");
testSpan.setAttribute("id", i);
testSpan.style.display = "inline";
testSpan.style.width = "100px";
testSpan.appendChild(testA);
sbody.appendChild(testSpan);
}
}
function init() {
testSpans(''scoobyDoo'');
}
</script>
</head>
<body onload="init()">
<h1>Test</h1>
<hr />
<table><tr><td id="scoobyDoo"></td></tr></table>
</body>
</html>
--------END CODE PAGE------------
When it displays, the <span>''s don''t line up on the same line like
they should:
IMAGE IMAGE
text text
Instead, it''s as if the first span never ends... the image from the
second span displays right after the text in the first, like this:
IMAGE
text IMAGE
text
Using MSIE''s "View Partial Source" powertoy, I can see that the
generated HTML is as follows:
--------BEGIN GENERATED HTML------------
<H1>Test</H1>
<HR>
<TABLE>
<TBODY>
<TR>
<TD id=scoobyDoo><SPAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN><SPAN id=1 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN></TD></TR></TBODY></TABLE>
--------END GENERATED HTML------------
The problem is that *this is right!* Putting this code in a page
displays perfectly, but it doesn''t when generated by the JavaScript
shown above.
Anyone have any ideas? A CSS tag that will help? Another way to
dynamically create this data? Anything will be appreciated...
- Akbar
Akbar <me@here.com> writes:
--------BEGIN CODE PAGE------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
I see you use a DOCTYPE that puts IE in standards mode.
When it displays, the <span>''s don''t line up on the same line like
they should:
IMAGE IMAGE
text text
They shouldn''t with the code you generate, not in standards mode.
<SPAN id=0 style="DISPLAY: inline; WIDTH: 100px">
I see a problem right here. The CSS width property should have no
effect on an inline block.
The problem is that *this is right!* Putting this code in a page
displays perfectly,
If by "this code" you mean the above, then notice that you don''t have
a DOCTYPE that puts the browser into standards mode. Add that, and IE
will show it the same way as when generating it with Javascript.
Anyone have any ideas? A CSS tag that will help? Another way to
dynamically create this data? Anything will be appreciated...
Make the blocks display:block and float:left. Then they will line up
the way you want. Or put them into separate td''s.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D''HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
''Faith without judgement merely degrades the spirit divine.''
Akbar wrote:Hey there,
Big-time curiosity issue here...
Here''s the test code (it''s not that long)... it''s to display a large
number of image links with captions, ideally pulled in from an
external file (that part''s not here -- spotlighting the problem code):
--------BEGIN CODE PAGE------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
I usually add these lines into xhtml files:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
<script type="text/javascript">
function testSpans(sbody) {
"In XHTML, the script and style elements are declared as having #PCDATA
content. As a result, < and & will be treated as the start of markup,
and entities such as < and & will be recognized as entity
references by the XML processor to < and & respectively. Wrapping the
content of the script or style element within a CDATA marked section
avoids the expansion of these entities."
http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8
So, if you use < or & in your unmarked CDATA function, then it will be
treated and considered as markup.
<script type="text/javascript">
<![CDATA[
.... unescaped script content ...
]]>
</script>
is what I suggest here since you use < in your code.
var sp, i, j, oneRecord;
sbody = document.getElementById(sbody);
for (i = 0; i <= 1; i++) {
right here, we see the <.
var bkSpan, bkAa, bkAb, bkAex, bkImg, bkTitle,
bkTypea, bkTypeb, txt, br;
txt = "Text Text";
testImg = document.createElement("img");
testImg.setAttribute("src",
"images/test.gif");
Not recommendable. setAttribute should be used only when there is no
other attribute possible. Here, the simple
testImg.src = "images/test.gif";
works.
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-87762984
testA = document.createElement("a");
testA.setAttribute("href",
"test/url/index.htm");
testA.href = "test/url/index.htm";
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-88517319
testA.appendChild(testImg);
br = document.createElement("br");
testA.appendChild(br);
testText = document.createTextNode(txt);
testA.appendChild(testText);
or
testA.appendChild(document.createTextNode(txt));
testSpan = document.createElement("span");
testSpan.setAttribute("id", i);
testSpan.id = i;
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-63534901
testSpan.style.display = "inline";
Per definiion, a span is an inline element. So, there is no need for
that here.
testSpan.style.width = "100px";
testSpan.appendChild(testA);
sbody.appendChild(testSpan);
}
}
function init() {
testSpans(''scoobyDoo'');
}
</script>
</head>
<body onload="init()">
<h1>Test</h1>
<hr />
<table><tr><td id="scoobyDoo"></td></tr></table>
</body>
</html>
--------END CODE PAGE------------
When it displays, the <span>''s don''t line up on the same line like
they should:
IMAGE IMAGE
text text
Instead, it''s as if the first span never ends... the image from the
second span displays right after the text in the first, like this:
IMAGE
text IMAGE
text
Using MSIE''s "View Partial Source" powertoy, I can see that the
generated HTML is as follows:
--------BEGIN GENERATED HTML------------
<H1>Test</H1>
<HR>
<TABLE>
<TBODY>
<TR>
<TD id=scoobyDoo><SPAN id=0 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN><SPAN id=1 style="DISPLAY: inline; WIDTH: 100px"><A
href="test/url/index.htm"><IMG height=30 src="images/test.gif"
width=28><BR>Text
Text</A></SPAN></TD></TR></TBODY></TABLE>
--------END GENERATED HTML------------
The problem is that *this is right!* Putting this code in a page
displays perfectly, but it doesn''t when generated by the JavaScript
shown above.
Anyone have any ideas? A CSS tag that will help? Another way to
dynamically create this data? Anything will be appreciated...
- Akbar
2 other suggestions:
- write a short but meaningful subject line in your post. Just
"Script-generated code displaying differntly" was sufficient
- try to upload your code, page somewhere and then just give the url;
that''s always better and so much more convenient as the code can be
tested with various softwares (validations, verifying http headers, link
validators, accessibility validators,etc..)
DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html
DU,
Lots of great info! Thanks! Some issues tho...
On Sun, 07 Sep 2003 15:11:56 -0400, DU <dr*******@hotREMOVEmail.com>
wrote:
So, if you use < or & in your unmarked CDATA function, then it will be
treated and considered as markup.
<script type="text/javascript">
<![CDATA[
... unescaped script content ...
]]>
</script>
is what I suggest here since you use < in your code.var sp, i, j, oneRecord;
sbody = document.getElementById(sbody);
for (i = 0; i <= 1; i++) {
right here, we see the <.
Tried this, now IE throws Syntax Errors. :( (In Opera7, it doesn;t
do anything at all... hmmmm. Neither does another page that works
fine.. hmmmmmmm.)
testImg.setAttribute("src", "images/test.gif");
Not recommendable. setAttribute should be used only when there is no
other attribute possible. Here, the simple
testImg.src = "images/test.gif";
works.
Thanks! Me == newb. Got most of this from an O''Reilly cookbook.
Learning by example...
testSpan.style.display = "inline";
Per definiion, a span is an inline element. So, there is no need for
that here.
This was me trying just about anything to see what might work to fix
it...
2 other suggestions:
- write a short but meaningful subject line in your post. Just
"Script-generated code displaying differntly" was sufficient
''kay.
- try to upload your code, page somewhere and then just give the url;
that''s always better and so much more convenient as the code can be
tested with various softwares (validations, verifying http headers, link
validators, accessibility validators,etc..)
''kay
Thanks again!
- Akbar
这篇关于脚本生成的代码显示不同于静态显示的完全相同的代码...帮助！？！？！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
