yuweijun'blog: document

Showing posts with label document. Show all posts

Tuesday, May 11, 2010

利用document.write()和noscript标签做内文替换的小技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>noscript tips</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>document.write("新页面内容" + "<nosc"+"ript>");</script>
原来的页面内容: 利用document.write()打印新的页面内容，并且打出一个noscript起始标签，在新页面内容想要替换的页面内容结尾处，添加一个noscript结束标签，从而利用document.write()和noscript标签对，用新页面内容替换原来的页面内容，这个小技巧是在看google做页面内容不同时的效果跟踪代码时发现的。
</noscript>
</body>
</html>

Tuesday, April 14, 2009

document onmousemove event differences in different browsers

当前文档document中如果有一个iframe时，当mouse滚过当前文档进入到iframe区域中时，不同的浏览器的表现形式有所不同，safari4/opera9.6中仍然能触发mouseover事件，但是在firefox3/ie中则不触发此mouseover事件，因为mouse已经离开了当前文档。

Sunday, October 12, 2008

Inject html string into a iframe

var text = "<div id='storeArea'>test</div>";
var content = "<html><body>" + text + "</body></html>";
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);

var doc = iframe.document;
if(iframe.contentDocument)
doc = iframe.contentDocument; // For NS6
else if(iframe.contentWindow)
doc = iframe.contentWindow.document; // For IE5.5 and IE6

// Put the content in the iframe
doc.open();
doc.writeln(content);
doc.close();
// Load the content into a TiddlyWiki() object
var storeArea = doc.getElementById("storeArea");
console.log(storeArea);

Reference:
http://softwareas.com/injecting-html-into-an-iframe

Tuesday, February 26, 2008

CSS float and document flow difference between firefox and ie7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>css float and document flow difference between firefox and ie7</title>
<style type="text/css">
.paragraphs {border: 1px solid #ccc; width: 300px; float: left; margin: 10px;}
.divs {border: 3px double #333; width: 600px; margin: 2px;}
</style>
</head>
<body>
text content before float elements, blah, blah.......<br />
text content before float elements, blah, blah.......
<p class="paragraphs">
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
</p>
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
<div class="divs">
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
<br />
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
</div>
</body>
</html>

Thursday, December 20, 2007

document referer and referrer

http request referer:
Referer http://www.google.cn/search?hl=zh-CN&q=%E6%B5%B7%E8%AF%8D&btnG=Google+%E6%90%9C%E7%B4%A2&meta=

php $_SERVER['http_referer']:
http://www.google.cn/search?hl=zh-CN&q=%E6%B5%B7%E8%AF%8D&btnG=Google+%E6%90%9C%E7%B4%A2&meta=

javascript referer:
document.referrer

Friday, December 14, 2007

Javascript document.write usage

var fragment = document.createDocumentFragment();
var testScript = document.createElement('script');
testScript.setAttribute('type', 'text/javascript');
testScript.setAttribute('src', 'http://www.test.com/test.php');// test.php 中有document.write('<iframe src....></iframe>')
fragment.appendChild(testScript);
document.body.appendChild(fragment);

程序在载入当前页和test.php后就不能再载入iframe里的scr指向的页面,并页面锁死,这个同在页面载完后调Function输出一个document.write一样的错误.

Tuesday, October 23, 2007

'document.getElementById(...)' 为空或不是对象


<div id="form_div"></div>
<script type="text/javascript">
var urls = 'http://www.google.com/search?q=test';
var fragment = document.createDocumentFragment();
var form = document.createElement('form');
var input = document.createElement('input');
var submit = document.createElement('input');
form.action = urls;
form.setAttribute('method', 'post'); // 这里不能设置为get方法，因为GET方法会将action中原有的参数过滤后加个表单里的参数，如text1=value。
input.setAttribute('value', "value");
input.setAttribute('type', "text");
input.setAttribute('name', "text1");
input.setAttribute('size', "50");
submit.setAttribute('type', "submit");
form.appendChild(input); // node.appendChild(newNode)方法执行后返回的值是newNode。
form.appendChild(document.createElement('br'));
form.appendChild(submit);
fragment.appendChild(form);
try
{
 document.getElementById('form_div').appendChild(fragment);
}
catch (e)
{
 document.write(e.message);
 //document.getElementById("form_div") => null
 //FF: document.getElementById("form_div") has no properties
 //IE: 'document.getElementById(...)' 为空或不是对象 
 //document.write(e.description);
 //IE: 'document.getElementById(...)' 为空或不是对象 
}
</script>

必须将给以上代码写入body标签中才能正确运行。
不然这段代码在浏览器解析时生成的DOM中，这一段javascript被置于head中，而form_div这个Element则会出现在浏览器生成的DOM的body中，而页面js被执行时，因为这个Element在执行语句之后，所以就会找不到此Element，从而报对象为空或不是对象这个错误。

Monday, October 22, 2007

window.location and document.location

window.location 和 window.location.herf 为可读写的属性，对此赋值可定向页面去指定的URL。
document.location 和 document.URL 等价，是可只读属性，并且推荐使用document.URL，document.location 已废弃。不过多数浏览器还是可以对document.location 和 document.location.href 赋值定向到新的URL，此做法不推荐使用。

yuweijun'blog