Posts Tagged ‘ javascript

如何防止自己的网站被别人以 iframe 盖台嵌入 (与反制办法)

“iframe (内置框架)”是用来在网页中的特定位置嵌入另一个网页。目前 Facebook、Google+、Twitter...等用来在网页上显示社群内容的社群元件,几乎都是以 iframe 实作出来的。

原本框架是一种很好的应用,但如果是自己辛苦制作的网页被别人的网站以 iframe 嵌入,因而出现在别人的网站里,成为别人网站的一部份!!这种感觉就像是自己的心血被别人整碗捧走一样!!

两个解决方法

方法 1

于网页的原始码加入以下 Script:

<script type="text/javascript">
if( top.location != document.location ){
	top.location.href = document.location.href;
}
</script>

以上的 Script 会检查浏览器最上层视窗的网址是否与目前网页的网址一致,如果不一致,则把最上层视窗的网址改为目前网页的网址,就酱。

方法 2 (反制办法)

于网页的原始码加入以下 Script:

<script type="text/javascript">
if( top.location != document.location ){
	document.write("<h1 style='color:#FF0000'>未经授权嵌入别人的网页是可耻的行为!!</h1>(<a href='"+document.location+"' target='_blank'>原站网址</a>)");
}
</script>

以上的 Script 会检查浏览器最上层视窗的网址是否与目前网页的网址一致,如果不一致,就显示:

未经授权嵌入别人的网页是可耻的行为!!
(原站网址)

我比较不喜欢与人家互呛,所以我通常是用“方法 1”啦!

简易网页下拉选单,可支援 MouseOver 与 Click 事件

在网页界已经有很多的“下拉选单”程式了,不过似乎都搞得太过复杂或太华丽了。

其实下拉选单的原理很简单,一开始只是先让“子选单”隐藏,当鼠标移至“主选单”时再让子选单显示。因此,只要能控制网页元件的 display 样式属性就已经成功一半了。

因为本人喜欢重新发明轮子,所以也写了一个简易的网页下拉选单的程式,可以做为初学者入门的参考。

在范例的原始码中,我尽量让程式码看起来浅显易懂,并且只用 JavaScript,不使用 jQuery 或其它 Framework。我也尽量多写一些注解,希望 JavaScript 的初学者能看得懂。

Read more

中文的 jQuery 教学资源

如果想学 jQuery 的话,可以从下列的教学资源开始,读者应具有 HTML、JavaScript、CSS 的基础。

网站

上官林杰 - ericsk (2007)

  1. jQuery 学习心得笔记 (1) – 前言
  2. jQuery 学习心得笔记 (2) – 怎么使用 jQuery 来写 JavaScript
  3. jQuery 学习心得笔记 (3) – jQuery 的事件(Event)处理
  4. jQuery 学习心得笔记 (4) – Ajax (上)
  5. jQuery 学习心得笔记 (5) – Ajax (下)
  6. jQuery 学习笔记 (6) - 操作 DOM 物件
  7. jQuery 学习笔记 (7) - 扩充 jQuery

以上这几篇是我的 jQuery 启蒙文章。
Read more

Javascript 模拟 jQuery 的选择器(Selector)

JQuery 强大、方便的选择器 (Selector) 是 jQuery 不可或缺的功能之一。不过如果我们不想加载 jQuery 而只想使用类似 jQuery 选择器的功能,那可以用自订函式的方式做到:

function $$(theElement){
    switch(theElement.charAt(0)){
    case ("#"):
        // 以 $$("#id") 传回物件
        return (document.getElementById(theElement.replace(/^#/, "")));
    case ("."):
        // 以 $$(".class") 传回物件阵列,IE 不支援
        return (document.getElementsByClassName(theElement.replace(/^\./, "")));
    default:
        // 以 $$("tag") 传回物件阵列
        return (document.getElementsByTagName(theElement));
    }
}

或是简单一点,仅传回指定 id 的物件:

function $$(theElement){
    return(document.getElementById(theElement));
}

我把这自订的函式取名为 $$(),用以与 jQuery 的 $() 做区隔。

但是要注意,以上两个函式传回的都是 DOM 物件,与 jQuery 在其它操作上并不相同。

理财试算 贷款计算机 *

原本只是要写一个贷款的计算程式,结果看到了其它的计算公式,就顺便写一写。版权没有,想要就自行检视网页原始码,拿去用。

本息平均摊还试算

本息平均摊还法是将本息一起平均在贷款期间偿还,每期偿还的本利和都一样,比较方便理财,为最常用之贷款偿还办法。

Read more

JavaScript 及动态网页设计(dhtml)的相关网页

国外网站

中文网站

其它

JavaScript 的规则运算式(Regular Expression)

样式比对

var mail = "yourname@domain.name";
var re = /^.+@.+\..+$/;
if(re.test(mail)){  alert("pass");  }

样式取代

参考网页

  1. 规则运算式简介
  2. 规则运算式语法
  3. 石头闲语: Regular Expression(RegExp) in JavaScript

以数学的原理处理四舍五入

我看过太多人都把四舍五入的问题看成是“字串”来处理,实际上,如果把四舍五入做为“数学”来解的话,程式大概只要几行即可解决。

以四舍五入取整数的例子来讲,其原理就是: 任何数值+0.5 再取整数

但要注意的是,当四舍五入遇到“负数”时,处理的方式就会变成“五舍六入”,这是因为中间数要往数值大的那边进位的缘故。所以加上了负数的处理,程式至少又多了一行:
Read more

让网页的“外部超连结”自动开启在新视窗

在编辑网页时,如果要让某个超连结 (Link) 开启在新的浏览器视窗,我们可以在超连结加上“href="_blank"”属性,但如果超连结很多,要一个一个加上去毕竟麻烦!!

以下的程式码可以帮你把网页内所有针对“外部”的超连结自动设为在新视窗开启。

一般网页

  1. 将下列程式码加到网页的 <head> 区段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 标签内的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外挂程式

如果你的网站是用 WordPress 架设,可直接在控制台搜寻并安装“Open external links in a new window”这个外挂程式 (版本: 1.3.1 作者: Kristian Risager Larsen),这样就不用添加任何程式码了。

另外需注意,如果本外挂程式与其它像 LightBox、FancyBox...之类的图片灯箱特效的程式一起使用,有可能会造成同时显示灯箱特效,又同时将图片开启于新视窗!!

一些好用的 JavaScript 的网址列指令

以下这些 JavaScript 指令,只要打在浏览器的网址列即可:

  • 变更视窗大小:
    javascript:window.resizeTo(800,600)
  • 检视 Cookies:
    javascript:alert("Cookie:"+document.cookie)
  • 打印网页:
    javascript:print()
  • return top