Javascript | PHP开发

存档

‘Javascript’ 分类的存档

ajax-cross-domain

2010年5月19日

5 条评论阅读 (21,129)

现在是Web 2.0时代，AJAX使用得非常多。但是使用纯粹的AJAX，经常会遇到跨域的问题。

其实归结起来，解决跨域问题，也不外乎几种方式：

1、代理方式

2、on-Demand方式

3、iframe方式

4、用户本地转储方式 (local)

5、其实还是在服务端A用iframe解决了与服务器B通信的问题

6、PHP + HTML(含JS)

其实这几种方式，原理基本上都是一样的，绕开AJAX对于跨域的限制。下面就对这几种处理方式大概谈一下。

1、web代理方式

即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。

2、on-Demand 方式

MYMSN的门户就用的这种方式，不过 MYMSN中不涉及跨域访问问题。在页面内动态生成新的<script>，将其src属性指向别的网站的网址，这个网址返回的内容必须是合法的Javascript脚本，常用的是JSON消息。此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。

<html>
<head>
<script language="javascript" type="text/javascript">
function loadContent()
{
var s=document.createElement(‘SCRIPT’);
s.src=’http://www.anotherdomain.com/TestCrossJS.aspx?f=setDivContent’;
document.body.appendChild(s);
}

function setDivContent(v)
{
var dv = document.getElementById("dv");
dv.innerHTML = v;
}
</script>
</head>
<body>
<div id="dv"></div>

其中的www.anotherdomain.com/TestCrossJS.aspx是这样的，

点击“Click Me”按钮，生成一个新的script tag，下载对应的 Javascript 脚本，结束时回调其中的setDivContent()，从而更新网页上一个div的内容。

3、iframe方式

查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用 iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。

在页面内嵌或动态生成指向别的网站的IFRAME，然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页，所以一个网页的状态得以保持，而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化，从而相应改变自己的状态。

1. http://domain1/TestCross.html:

<html>
<head>
<script language="javascript" type="text/javascript">
var url = "http://domain2/TestCross.html"
var oldHash = null;
var timer = null;

function getHash()
{
var hash = window.location.hash;
if ((hash.length >= 1) && (hash.charAt(0) == ‘#’))
{
hash = hash.substring(1);
}

return hash;
}
function sendRequest()
{
var d = document;
var t = d.getElementById(‘request’);
var f = d.getElementById(‘alienFrame’);
f.src = url + "#" + t.value + "<br/>" + new Date();
}

function setDivHtml(v)
{
var d = document;
var dv = d.getElementById(‘response’);
dv.innerHTML = v;
}

function idle()
{
var newHash = getHash();

if (newHash != oldHash)
{
setDivHtml(newHash);
oldHash = newHash;
}

timer = window.setTimeout(idle, 100);
}

function window.onload()
{
timer = window.setTimeout(idle, 100);
}
</script>
</head>
<body>

请求：<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
回复：<div id="response"></div>

</body>
</html>

2. http://domain2/TestCross.html:

<html>
<head>
<script language="javascript" type="text/javascript">
var url = "http://domain1/TestCross.html"
var oldHash = null;
var timer = null;

function getHash()
{
var hash = window.location.hash;
if ((hash.length >= 1) && (hash.charAt(0) == ‘#’))
{
hash = hash.substring(1);
}

return hash;
}
function sendRequest()
{
var d = document;
var t = d.getElementById(‘request’);
var f = parent;
//alert(f.document); //试着去掉这个注释，你会得到“Access is denied”
f.location.href = url + "#" + t.value + "<br/>" + new Date();
}

function setDivHtml(v)
{
var d = document;
var dv = d.getElementById(‘response’);
dv.innerHTML = v;
}

function idle()
{
var newHash = getHash();

if (newHash != oldHash)
{
setDivHtml(newHash);
oldHash = newHash;
}

timer = window.setTimeout(idle, 100);
}

function window.onload()
{
timer = window.setTimeout(idle, 100);
}
</script>
</head>
<body>

请求：<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
回复：<div id="response"></div>

</body>
</html>

两个网页基本相同，第一个网页内嵌一个IFRAME，在点击“发送”按钮后，会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后，它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment，浏览器不会重新load网页内容，这里使用了一个计时器来检测URL变化，如果变化了，就更新其中一个div的内容。

4、用户本地转储方式 (local)

IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之间可以在客户端通过 windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF 也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。

5、其实还是在服务端A用iframe解决了与服务器B通信的问题

要解决的问题：发生在用户提交网页 URL （还包括 Tag, Notes 等）给 Bookmark 服务器时。

关于 URL 的提交至少可以有三种方式：

1. 登陆 Bookmark 服务器的提交页面，将要收藏的 URL 通过该页面提交给服务器。

2. 安装浏览器插件，通过插件将 URL 提交给服务器。

3. 从 Bookmark 服务器动态加载 javascript 小工具到当前页面，通过它来完成提交工作。

第一种方式开发起来最简单，但对用户来讲比较麻烦，每次都需要先登陆 Bookmark 服务器才能完成提交；第二种方式我并不熟悉插件开发，而且用户也不喜欢太多的插件堆满自己的浏览器；第三种方式开发难度小，又避免了每次登陆服务器的麻烦，所以最终采用它。第三种方式中动态加载的 javascript 小工具除了需要生成 UI 供用户填写信息（ URL ， tag ， notes 等），当用户点击提交的时候，还要完成与服务器通信的功能。

跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。写过跨域访问 ajax 的朋友相信都遇到过被告知“没有权限”的情况。通过 XMLHttp 来发送数据给 Bookmark 服务器的尝试失败了。于是，看到网上的一些资料，我又开始尝试用 javascript 小工具在用户网页动态创建一个隐藏的 iframe, iframe 的 src 指向服务器的一个 servlet ，试图通过调用 iframe 中提供的 javascript 来完成与服务器的通信。但不幸的是，用户网页中的 javascript 代码访问 iframe 也被浏览器归为跨域访问（特指 iframe 的 src 指向其它网站的情形），尝试再次失败。

最终，在一篇文章中看到，与 iframe 不同，如果 A 网站从 B 网站加载 javascript ， A 网站可以自由的访问该 javascript 的内容，并不会被浏览器认为是跨域访问。模仿刚才 iframe 的思路，当用户点击提交时，可以动态创建一个 javascript 对象，该对象的 src 指向 Bookmark 服务器的一个 servlet ，注意： URL 、 Tag 、 Notes 、 User 、Password 等信息被作为 src URL 参数传给服务器。请看下面的代码：

var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +

"url=" + url_source + "&" + "title=" + title + "&" +

"tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;

url = encodeURI(url);

//Submit to server with a trick

var js_obj = document.createElement( "script" );

js_obj.type = "text/javascript" ;

js_obj.setAttribute( "src" , url);

//Get response from server by appending it to document

document.body.appendChild(js_obj);

上面例子中， js_obj.setArrribute() 将信息作为 src 的 URL 参数提交给了 Bookmark servlet 。那么用户又如何取得服务器的响应信息呢？答案就是最末一行代码， servlet 的输出必须是 javascript 代码，它可以调用用户网页上的其他 javascript 函数，以及操作 dom 对象。下面的 servlet 代码生成了一个 javascript 函数调用：

out.write("onServerResponse(INADEQUATE_INFORMATION);");

document.body.appendChild(js_obj) 执行后 onServerResponse( INADEQUATE_INFORMATION) 就会得到执行，使客户网页响应服务器结果。这样一个完整的通信过程就完成了。

6、PHP + HTML(含JS)

服务器A上已经装好了Tomcat, 我们写一个test.html(含JS)，再写一个PHP文件（由其来完成跨域通信要求）。

http://www.xyhhxx.com/news/net/20061013121041.htm

以上几种方式，其实方式都差不多，只是实现方式不同而已。诸君可根据具体情况选择其一做为具体的解决办法。

怎么样？简单吧？简单就回复一下。。。。

HTML, Javascript, PHP从入门到精通 ajax

关于JS获取select的值

2010年3月16日

没有评论阅读 (73,690)

近日，在一项目中需要采用JS获取Select选择框所选中项的值，居然一下子忘记了如何获取。于是看了DOM文档，真觉得是自己老了，连这么简单的东西都忘记了。

为怕以后再忘记，也给同行一个提示，遂记录于此。

<select id="s1" name="s1">
<option selected="selected" value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>

操作一、获取所选择项显示的文字

document.getElementById(‘s1’).options[document.getElementById(‘s1’).selectedIndex].text

若当前选中“选项二”，则这种方式所取的结果为：选项二

操作二、获取所选择项的value

document.getElementById(‘s1’).options[document.getElementById(‘s1’).selectedIndex].value

若当前选中“选项二”，则这种方式所取的结果为：2

操作三、获取当前选择项

document.getElementById(‘s1’).selectedIndex

若当前选中“选项一”，则这种方式所取的结果为：1

这里对于select必须得有id属性，才能采用getElementById获取该控件，这点需要注意。

另外，对于PHP获取页面所提交的Select控件的值，需要Select控件得有name属性，在PHP内获取表单上的Select控件数据时，采用$s = $_POST[‘select的name属性值’];这种方式来获取。

怎么样？其实很简单的吧，希望能给初学者一个启示！

HTML, Javascript, PHP教程 HTML, js, PHP教程, select

媲美163博客的博客系统

2009年4月30日

4 条评论阅读 (4,906)

首先讲一个博客系统的主要功能：

1、博客系统的主页以模块为单位进行显示

2、博客的所有模块可进行自由配置显示，

3、博客的页面布局可进行自由选择，即选择几列显示、或左宽右窄之类

4、博客的皮肤可进行自己选择

5、博客的皮肤可自行定义设置（开发中）

6、博主设置类别，每一种类别有自己默认的菜单、页面布局和默认显示模块

还是一样，先上两张效果图看看：

第一张：模块配置与页面布局设置

第二张：博客风格选择

稍后将关于这个系统的代码进行分析，敬请期待！

HTML, Javascript, PHP教程 div, Javascript, 博客, 模块配置, 风格配置

执行innerHTML中的Javascript代码

2009年4月10日

没有评论阅读 (4,531)

之前曾讲到采用set_innerHTML函数实现执行innerHTML中的JAVASCRIPT代码，其中讲到一种方法就是采用JS创建一个iframe的方式。

这里就将该方式的实现作一个介绍。

在我们使用AJAX的时候，经常要用到innetHTML来更新对象的内容，但是对于更新的<script>脚本程序浏览器却无法执行，我前面AJAX初学常遇问题解答这篇文章曾提到过这个问题，它不执行的原因是：<script>标签只在浏览器第一次文档加载中被解析，下面介绍怎么样让<script>跑起来。

分析问题
既然<script>只在文档加载中才被解析，那么我就得调用document.write()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把document.write()装载起来。

解决问题
var jsCode = 需要执行的JS代码
var jsIframe = document.createElement(“iframe”);
jsIframe.style.display = “none”;//把jsIframe隐藏起来
document.body.appendChild(jsIframe);
with(window.frames[window.frames.length - 1]){
document.open();
document.write(jsCode); //执行JS代码
document.close();
}
document.body.removeChild(jsIframe);//执行后删除iframe对象
这里需要注意一个问题，因为jsCode是在iframe中运行，所以所有的页面元素都在iframe父对象之下，要调用页面元素对象必须得用 parent.obj 这种方式。

另外一种方法：

用dom动态创建一个script对象
var script=document.createElement(“script”);
script.src=”XXXX.js”;
document.body.appendChild(script);

DIV/CSS, HTML, Javascript innerHTML, java, Javascript, set_innerHTML

一些常用键盘值

2009年4月2日

没有评论阅读 (1,908)

除了上文罗列的所有的键盘值，在开发中常常会用到一些固定键的值。

altKey 设置或获取 Alt 键的状态。

altLeft 设置或获取左 Alt 键的状态。

Banner 使用 event 对象获取高级流重定向器(ASX)文件中项目的 Banner 内容。

button 设置或获取用户所按的鼠标按钮。

cancelBubble 设置或获取当前事件是否要在事件句柄中向上冒泡。

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

contentOverflow 获取表明文档处理当前 LayoutRect 对象后是否包含附加的内容。

ctrlKey 设置或获取 Ctrl 键的状态。

ctrlLeft 设置或获取左 Ctrl 键的状态。

dataFld 设置或获取 oncellchange 事件影响的数据列。

fromElement 设置或获取事件发生时激活或鼠标将要离开的对象。

keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。

MoreInfo 通过 event 对象获取高级流重定向器(ASX)文件中项目横幅的 MoreInfo 内容。

nextPage 获取打印模板中下页的位置。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

propertyName 设置或获取对象上发生更改的属性名称。

qualifier 设置或获取由数据源对象提供的数据成员的名称。

reason 设置或获取数据源对象的数据传输结果。

recordset 从数据源对象设置或获取对默认数据集的引用。

repeat 获取 onkeydown 事件是否正在重复。

returnValue 设置或获取事件的返回值。

saveType 当 oncontentsave 触发时获取剪贴板类型。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

shiftKey 设置或获取 Shift 键的状态。

shiftLeft 设置或获取左 Shift 键的状态。

srcElement 设置或获取触发事件的对象。

srcFilter 设置或获取触发 onfilterchange 事件的滤镜对象。

srcUrn 获取触发事件的行为的统一资源名称(URN)。

toElement 设置或获取用户要将鼠标指针移动指向的对象的引用。

type 从 event 对象中获取事件名称。

wheelDelta 设置或获取滚轮按钮滚动的距离和方向。

Javascript js, JS获取键盘, 键盘值

键盘值

2009年4月2日

没有评论阅读 (1,573)

在采用JS控制键盘操作时，常常会判断用户所按下的键，在此将键盘值表罗列出来，以供参考。

keycode 0 =
keycode 1 =
keycode 2 =
keycode 3 =
keycode 4 =
keycode 5 =
keycode 6 =
keycode 7 =
keycode 8 = BackSpace BackSpace
keycode 9 = Tab Tab
keycode 10 =
keycode 11 =
keycode 12 = Clear
keycode 13 = Enter
keycode 14 =
keycode 15 =
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 21 =
keycode 22 =
keycode 23 =
keycode 24 =
keycode 25 =
keycode 26 =
keycode 27 = Escape Escape
keycode 28 =
keycode 29 =
keycode 30 =
keycode 31 =
keycode 32 = space space
keycode 33 = Prior
keycode 34 = Next
keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 44 =
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 section threesuperior
keycode 52 = 4 dollar
keycode 53 = 5 percent
keycode 54 = 6 ampersand
keycode 55 = 7 slash braceleft
keycode 56 = 8 parenleft bracketleft
keycode 57 = 9 parenright bracketright
keycode 58 =
keycode 59 =
keycode 60 =
keycode 61 =
keycode 62 =
keycode 63 =
keycode 64 =
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E EuroSign
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M mu
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q at
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 91 =
keycode 92 =
keycode 93 =
keycode 94 =
keycode 95 =
keycode 96 = KP_0 KP_0
keycode 97 = KP_1 KP_1
keycode 98 = KP_2 KP_2
keycode 99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 138 =
keycode 139 =
keycode 140 =
keycode 141 =
keycode 142 =
keycode 143 =
keycode 144 =
keycode 145 =
keycode 146 =
keycode 147 =
keycode 148 =
keycode 149 =
keycode 150 =
keycode 151 =
keycode 152 =
keycode 153 =
keycode 154 =
keycode 155 =
keycode 156 =
keycode 157 =
keycode 158 =
keycode 159 =
keycode 160 =
keycode 161 =
keycode 162 =
keycode 163 =
keycode 164 =
keycode 165 =
keycode 166 =
keycode 167 =
keycode 168 =
keycode 169 =
keycode 170 =
keycode 171 =
keycode 172 =
keycode 173 =
keycode 174 =
keycode 175 =
keycode 176 =
keycode 177 =
keycode 178 =
keycode 179 =
keycode 180 =
keycode 181 =
keycode 182 =
keycode 183 =
keycode 184 =
keycode 185 =
keycode 186 =
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 191 =
keycode 192 = numbersign apostrophe
keycode 193 =
keycode 194 =
keycode 195 =
keycode 196 =
keycode 197 =
keycode 198 =
keycode 199 =
keycode 200 =
keycode 201 =
keycode 202 =
keycode 203 =
keycode 204 =
keycode 205 =
keycode 206 =
keycode 207 =
keycode 208 =
keycode 209 =
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 219 =
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 222 =
keycode 223 =
keycode 224 =
keycode 225 =
keycode 226 =
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

Javascript key, keyCode, 键盘值

遍历js对象所有属性

2009年3月26日

没有评论阅读 (2,277)

今天在做JS处理时，突然想到如何在不知道对象的属性名称的情况下显示所有属性，即需要遍历对象的属性。随即G了一下，发现其实挺简单的。遍历JS对象属性代码如下所示。

/*
* 用来遍历指定对象所有的属性名称和值
* obj 需要遍历的对象
*/
function allPrpos(obj){
      // 用来保存所有的属性名称和值
      var props = "";
      // 开始遍历
      for(var p in obj){
            // 方法
            if(typeof(obj[p])=="function"){
                  obj[p]();
            }else{
                  // p 为属性名称，obj[p]为对应属性的值
                  props+= p + "=" + obj[p] + " ";
            }
      }
      // 最后显示所有的属性
      alert(props);
}

这样，只需要在显示对象属性的位置调用allPrpost（）函数即可。非常简单！

Javascript JS对象, 遍历, 遍历对象, 遍历属性

触发另一按钮的onclick事件

2009年3月9日

没有评论阅读 (2,647)

在平常的Web开发中，常常需要在其它JS或者是其它按钮的事件中使用到某一按钮的onclick事件，按平常思维一想，这是不可能的。

因为那个按钮的onclick事件，只是在按下鼠标左键时才可能会触发其事件，进而执行onclick事件中的所指定的JS脚本。

为了实现上述功能，笔者在开发也遇到困难，后来才想起，前段时间也曾进行过类似的开发，只需要在需要处理的JS脚本中添加以下一句即可实现上述功能：

document.getElementById(“btnid”).onclick();

其中，btnid为需要触发的按钮或者其它控件的ID。

Javascript Javascript, onclick, 事件, 按钮, 触发

获取页面元素位置

2009年2月11日

没有评论阅读 (4,006)

在Web编程中，常常会使用某个元素的位置，即相对于整个屏幕左上方的位置。

这里有一个较好的方法实现。

function getElementPos(elementId){
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none'){
return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect) //IE
{
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
//alert(box.left+scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}
else if(document.getBoxObjectFor) // gecko
{
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
}
else // safari & opera
{
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}

if (ua.indexOf('opera') != -1|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}

}
if (el.parentNode) { parent = el.parentNode; }
else { parent = null; }

while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML'){ // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) { parent = parent.parentNode; }
else { parent = null; }
}
return {x:pos[0], y:pos[1]};
}

DIV/CSS, HTML, Javascript javas, Javascript, pos, 位置, 元素位置

两个网页颜色拾取器

2009年2月11日

没有评论阅读 (2,254)

在Web应用中，常常需要让用户直接选择。这里使用了两种。第一种更为简单，可直接进行使用。

第一种: 256色安全选择器。

//this,colorDiv,colorTxt
var curDiv,curTxt;

function showColorPicker(btn, colorDiv, colorTxt){
	curDiv = colorDiv;curTxt = colorTxt;
	if(document.getElementById("colorPicker") != null){
		if(document.getElementById("colorPicker").style.visibility=="hidden"){
			var a=getElementPos(btn.id);
			var b=eval(a);
			document.getElementById("colorPicker").style.top=b.y+15+"px";
			document.getElementById("colorPicker").style.left=b.x+"px";
			document.getElementById("colorPicker").style.visibility="visible";
		}
		else{
			document.getElementById("colorPicker").style.visibility="hidden";
		}
		return false;
	}
	ColorPicker(btn, colorDiv, colorTxt);
}
function ColorPicker(btn, colorDiv, colorTxt) {
	var baseColor=new Array(6);
	baseColor[0]="00";
	baseColor[1]="33";
	baseColor[2]="66";
	baseColor[3]="99";
	baseColor[4]="CC";
	baseColor[5]="FF";
	var myColor;
	myColor="";
	var myHTML;
	myHTML="
<table style="text-align:left;" border="1" cellspacing="0" cellpadding="0" width="200">
<tbody>
<tr>
<td bgcolor="#cccccc">"+
	"
<input id="colorInput" style="background-color:#cccccc;border:1px solid #000000;" size="6" />"+
	"</td>
</tr>
<tr>
<td>";
	myHTML=myHTML+"
<table style="background-color:#ccc;" border="0" cellspacing="1" cellpadding="0" width="100%">";
	for(i=0;i&lt;6;i++){
		myHTML=myHTML+"
<tbody>
<tr height="10">";
		for(j=0;j&lt;3;j++){
	        for(k=0;k&lt;6;k++){
				myColor=baseColor[j]+baseColor[k]+baseColor[i];
				myHTML=myHTML+"
<td onclick="colorpickerclose();" onmouseover="\&quot;selectColor(this.bgColor," width="10" height="10" bgcolor="#00c000"></td>
";
			}
		}
		myHTML=myHTML+"</tr>
";
	}
	for(i=0;i&lt;6;i++){
		myHTML=myHTML+"
<tr height="10">";
		for(j=3;j&lt;6;j++){
			for(k=0;k&lt;6;k++){
				myColor=baseColor[j]+baseColor[k]+baseColor[i];
				myHTML=myHTML+"
<td onclick="colorpickerclose();" onmouseover="\&quot;selectColor(this.bgColor," width="10" height="10" bgcolor="#00c000"></td>
";
			}
		}
		myHTML=myHTML+"</tr>
";
	}
	myHTML=myHTML+"</tbody></table>
";
	myHTML=myHTML+"</td>
</tr>
</tbody></table>
";
	var a=getElementPos(btn.id);
	var b=eval(a);
	var div = document.createElement("div");
	div.id = "colorPicker";
	div.style.width="200px";
	div.style.height="158px";
	div.style.position="absolute";
	div.style.left=b.x+"px";
	div.style.top=b.y+15+"px";
	div.style.borderWidth="1px";
	div.style.borderStyle="solid";
	div.style.borderColor="#999";
	div.style.display="block";
	div.style.zIndex="10000";
	div.innerHTML=myHTML;
	if(document.getElementById("colorPicker") != null)
		document.body.removeChild(div);
	document.body.appendChild(div);
}
function selectColor(colorStr, colorDiv, colorTxt){
	document.getElementById("colorText").innerHTML="      "+colorStr;
	document.getElementById("colorInput").style.backgroundColor=colorStr;
	if(document.getElementById(curTxt)!=null) {document.getElementById(curTxt).innerHTML=colorStr;document.getElementById(curTxt).style.backgroundColor=colorStr;}
	if(document.getElementById(curDiv)!=null) {document.getElementById(curDiv).style.backgroundColor=colorStr;}
}
function colorpickerclose(){
	document.getElementById("colorPicker").style.visibility="hidden";
}

function getElementPos(elementId){
	var ua = navigator.userAgent.toLowerCase();
	var isOpera = (ua.indexOf('opera') != -1);
	var isIE = (ua.indexOf('msie') != -1 &amp;&amp; !isOpera); // not opera spoof
	var el = document.getElementById(elementId);
	if(el.parentNode === null || el.style.display == 'none'){
		return false;
	}
	var parent = null;
	var pos = [];
	var box;
	if(el.getBoundingClientRect) //IE
	{
		box = el.getBoundingClientRect();
		var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
		//alert(box.left+scrollLeft);
		return {x:box.left + scrollLeft, y:box.top + scrollTop};
	}
	else if(document.getBoxObjectFor) // gecko
	{
		box = document.getBoxObjectFor(el);
		var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
		var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
		pos = [box.x - borderLeft, box.y - borderTop];
	}
	else // safari &amp; opera
	{
		pos = [el.offsetLeft, el.offsetTop];
		parent = el.offsetParent;
		if (parent != el) {
			while (parent) {
				pos[0] += parent.offsetLeft;
				pos[1] += parent.offsetTop;
				parent = parent.offsetParent;
			}
		}

		if (ua.indexOf('opera') != -1|| ( ua.indexOf('safari') != -1 &amp;&amp; el.style.position == 'absolute' )){
			pos[0] -= document.body.offsetLeft;
			pos[1] -= document.body.offsetTop;
		}

	}
	if (el.parentNode) { parent = el.parentNode; }
	else { parent = null; }

	while (parent &amp;&amp; parent.tagName != 'BODY' &amp;&amp; parent.tagName != 'HTML'){ // account for any scrolled ancestors
		pos[0] -= parent.scrollLeft;
		pos[1] -= parent.scrollTop;
		if (parent.parentNode) { parent = parent.parentNode; }
		else { parent = null; }
	}
	return {x:pos[0], y:pos[1]};
}

第二种：类windows的颜色选择器。

pickercolor

DIV/CSS, HTML, Javascript colorpicker, Javascript, selector, 颜色拾取器

PHP开发

存档

ajax-cross-domain

关于JS获取select的值

媲美163博客的博客系统

执行innerHTML中的Javascript代码

一些常用键盘值

键盘值

遍历js对象所有属性

触发另一按钮的onclick事件

获取页面元素位置

两个网页颜色拾取器

最近文章

最近评论

flash

PHP教程

SEO

博客推广

链接表

Categories

Archives

Meta

2010年九月
日	一	二	三	四	五	六
« 八
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30