code10111: JavaScript

顯示具有 JavaScript 標籤的文章。顯示所有文章

2012年4月11日星期三

Use empty-element tag for iframe will not work in Firefox

[HTML][XML][JavaScript]
以下內容之環境為Firefox 11.0

在XML的規則下，start-tag 與 end-tag 中間沒東西的話，可改寫成 empty-element tag
所以 <iframe></iframe> 可以改寫成:
<iframe />

但是，當你把它存成HTML，並用Browser打開它
第一個 <iframe /> 之後的東西都無法顯示
你必須要改成
<iframe></iframe>
才能正常顯示

另外，將xml字串轉換成DOM物件，再將DOM物轉回xml字串，他會改變你的字串
var xmlText = "<iframe></iframe>";
var parser = new DOMParser();
//轉換成DOM物件
var xmlDoc = parser.parseFromString( xmlText, "text/xml" );
var serializer = new XMLSerializer();
//再將DOM物轉回xml字串
var newXmlText = serializer.serializeToString( xmlDoc );

newXmlText 會等於 "<iframe />"
也就是他會自動把 "<iframe></iframe>" 轉成 "<iframe />"

但是，如果xmlText的 <iframe> 與 </iframe> 的中間有個空白鍵
那他就不會自動轉換
也就是說 "<iframe> </iframe>" 依舊還是 "<iframe> </iframe>"

補充:
<iframe> Tag Syntax --- Rules for coding HTML iframe elements
http://www.html-5.com/tags/iframe-tag/syntax.html
...The iframe element is an empty element, with both a start tag and an end tag, not a void element.

Definition of HTML "void element"
http://www.html-5.com/definitions/#void-element

Definition of "empty element"
http://www.html-5.com/definitions/#empty-element

再補充:
,-<http://www.w3.org/TR/xml11/#sec-starttags>
|
| [...]
| Tags for Empty Elements
|
| [44] EmptyElemTag ::= '<' Name (S Attribute)* S? '/>' [WFC: Unique Att Spec]
|
| Empty-element tags may be used for any element which has no content,
| whether or not it is declared using the keyword EMPTY. For
| interoperability, the empty-element tag SHOULD be used, and SHOULD
| only be used, for elements which are declared EMPTY.

See also <http://www.w3.org/TR/xhtml-media-types/#compatGuidelines>:

| A.3. Elements that have no content
|
| If an element permits content (e.g., the div element) but an instance
| of that element has no content (e.g., an empty section), DO NOT use
| the "minimized" tag syntax (e.g., <div />).
|
| Rationale: HTML user agents may give uncertain results when using the
| [...] minimized syntax permitted by XML when an element has no content.

2012年4月8日星期日

JavaScript XML CSS 相關

觀念釐清:

[JavaScript] 這篇文章真是太棒了，學 JavaScript function 必看文章
JavaScript, 5 ways to call a function
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

[JavaScript] 有些奇特的例子，但解說容易令人混淆，強烈建議看完上篇再看這篇
令人又愛又恨的 JavaScript function
http://geek-cafe-hk.blogspot.com/2011/06/javascript-function.html

[XML] 這網站太棒了，完整詳細的介紹
XML namespace
http://zvon.org/xxl/NamespaceTutorial/Output_chi/contents.html

[WWW] 被中文翻譯混淆，查英文才知真意
What is synchronous?
http://www.webopedia.com/TERM/S/synchronous.html
What is asynchronous?
http://www.webopedia.com/TERM/A/asynchronous.html

好用工具:

[HTML][CSS]設計Table的好工具
HTML and CSS Table Border Style Wizard
http://www.somacon.com/p141.php

[JavaScript]
好用到掉渣的IE8 Developer Tools--JS效能調校經驗
http://blog.darkthread.net/post-2009-06-08-ie8-devtool-profiler.aspx

查資料好所在:

[JavaScript]非常好的解說與範例，且附懶人demo
關於 implementation 的 createDocument() 與 createDocumentType()
createDocument method (implementation)
http://help.dottoro.com/ljqlhagh.php

[JavaScript]非常好的解說與範例，且附懶人demo
比較 serializeToString 與 outerHTML
XMLSerializer object
http://help.dottoro.com/ljwwrcvr.php

[HTML][CSS] 從裡面找到了沒過時的方法(符合HTML4)，不然我還真不知如何置中Box和Table
Centering Tables
http://theodorakis.net/tablecentertest.html

[CSS]
CSS Reference
http://www.w3schools.com/cssref/default.asp

[HTML]
HTML Tutorial
http://www.w3schools.com/html/default.asp

[JavaScript] 這網站不錯，都幫你整理好了
螞蟻的 JavaScript: document：方法(F-Z)
http://ant4js.blogspot.com/2008/12/documentmthfz.html

http://reference.sitepoint.com/javascript/Document/getElementsByTagName