与“get”相关的文章 - 𝓍𝑜𝓎𝑜𝓏𝑜.𝓃𝑒𝓉

跨域 iframe 高度自适应

1. 跨子域的iframe高度自适应

2. 完全跨域的iframe高度自适应

同域的我们可以轻松的做到

1. 父页面通过iframe的contentDocument或document属性访问到文档对象，进而可以取得页面的高度，通过此高度值赋值给iframe tag。

2. 子页面可以通过parent访问到父页面里引入的iframe tag，进而设置其高度。

但跨域的情况则不允许对子页面或父页面的文档进行访问（返回undefined），所以我们要做的就是打通或间接打通这个壁垒。

一、跨子域的iframe高度自适应

比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，这种跨子域的页面

3.html

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />

<title>1.html</title>

<script type="text/javascript">

document.domain = 'jd.com'

</script>

</head>

<body>

<iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe>

</body>

</html>

4.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>2.html</title>

<script type="text/javascript">

document.domain = 'jd.com'

</script>

</head>

<body>

<p>这是一个ifrmae，嵌入在3.html里 </p>

<p>根据自身内容调整高度</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<script>

// 计算页面的实际高度，iframe自适应会用到

function calcPageHeight(doc) {

var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

var height = Math.max(cHeight, sHeight)

return height

}

window.onload = function() {

var height = calcPageHeight(document)

parent.document.getElementById('ifr').style.height = height + 'px'

}

</script>

</body>

</html>

可以看到与上一篇对比，只要在两个页面里都加上document.domain就可以了

二、完全跨域的iframe高度自适应

分别有以下资源

页面 A：http://snandy.github.io/lib/iframe/A.html
页面 B：http://snandy.github.io/lib/iframe/B.html
页面 C：http://snandy.jd-app.com
D.js：http://snandy.github.io/lib/iframe/D.js

这四个资源有如下关系

1. A里嵌入C，A和C是不同域的，即跨域iframe

2. C里嵌入B，C和B是不同域的，但A和B是同域的

3. C里嵌入D.js，D.js放在和A同域的项目里

通过一个间接方式实现，即通过一个隐藏的B.html来实现高度自适应。

A.html

嵌入页面C: http://snandy.jd-app.com

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />

<title>A.html</title>

</head>

<body>

<iframe id="ifr" src="http://snandy.jd-app.com" frameborder="0" width="100%"></iframe>

</body>

</html>

B.html

嵌入在C页面中，它是隐藏的，通过parent.parent访问到A，再改变A的iframe(C.html)高度，这是最关键的，因为A，B是同域的所以可以访问A的文档对象等。

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />

<title>B.html</title>

</head>

<body>

<script type="text/javascript">

window.onload = function() {

var isSet = false

var inteval = setInterval(function() {

var search = location.search.replace('?', '')

if (isSet) {

clearInterval(inteval)

return

}

if (search) {

var height = search.split('=')[1]

var doc = parent.parent.document

var ifr = doc.getElementById('ifr')

ifr.style.height = height + 'px'

isSet = true

}

}, 500)

}

</script>

</body>

</html>

C.html

嵌入在A中，和A不同域，要实现C的自适应，C多高则A里的iframe就设为多高。C里嵌入B.html 和 D.js

<!doctype html>

<html>

<head>

<title>C.html</title>

<meta charset="utf-8">

</head>

<body>

<h3>这是一个很长的页面，我要做跨域iframe的高度自适应</h3>

<ul>

<li>页面 A：http://snandy.github.io/lib/iframe/A.html</li>

<li>页面 B：http://snandy.github.io/lib/iframe/B.html</li>

<li>页面 C：http://snandy.jd-app.com</li>

<li>D.js：http://snandy.github.io/lib/iframe/D.js</li>

</ul>

<p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p>

<iframe id="myifr" style="display:none" src="http://snandy.github.io/lib/iframe/B.html"></iframe>

<script type="text/javascript" src="http://snandy.github.io/lib/iframe/D.js"></script>

</body>

</html>

D.js

在页面C载入后计算其高度，然后将计算出的height赋值给C里引入的iframe（B.html）的src

// 计算页面的实际高度，iframe自适应会用到

function calcPageHeight(doc) {

var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

var height = Math.max(cHeight, sHeight)

return height

}

window.onload = function() {

var doc = document

var height = calcPageHeight(doc)

var myifr = doc.getElementById('myifr')

if (myifr) {

myifr.src = 'http://snandy.github.io/lib/iframe/B.html?height=' + height

// console.log(doc.documentElement.scrollHeight)

}

};

线上示例：http://snandy.github.io/lib/iframe/A.html

转自 Snandy 10 年前

3,765

PHP 获取 POST 数据的 3 种方法

PHP如何获取表单的POST数据呢？本文介绍3种获取POST数据的方法，并将代码附上，希望可以帮助到你。

一、PHP获取POST数据的几种方法

方法1、最常见的方法是：$_POST['fieldname'];

说明：只能接收Content-Type: application/x-www-form-urlencoded提交的数据
解释：也就是表单POST过来的数据

方法2、file_get_contents(“php://input”);

说明：

允许读取 POST 的原始数据。
和 $HTTP_RAW_POST_DATA 比起来，它给内存带来的压力较小，并且不需要任何特殊的 php.ini 设置。
php://input 不能用于 enctype=”multipart/form-data”。

解释：

对于未指定 Content-Type 的POST数据，则可以使用file_get_contents(“php://input”);来获取原始数据。
事实上，用PHP接收POST的任何数据都可以使用本方法。而不用考虑Content-Type,包括二进制文件流也可以。
所以用方法二是最保险的方法。

方法3、$GLOBALS['HTTP_RAW_POST_DATA'];

说明：

总是产生 $HTTP_RAW_POST_DATA 变量包含有原始的 POST 数据。
此变量仅在碰到未识别 MIME 类型的数据时产生。
$HTTP_RAW_POST_DATA 对于 enctype=”multipart/form-data” 表单数据不可用
如果post过来的数据不是PHP能够识别的，可以用 $GLOBALS['HTTP_RAW_POST_DATA']来接收，
比如 text/xml 或者 soap 等等

解释：

$GLOBALS['HTTP_RAW_POST_DATA']存放的是POST过来的原始数据。
$_POST或$_REQUEST存放的是 PHP以key=>value的形式格式化以后的数据。
但$GLOBALS['HTTP_RAW_POST_DATA']中是否保存POST过来的数据取决于centent-Type的设置，即POST数据时必须显式示指明Content-Type: application/x-www-form-urlencoded，POST的数据才会存放到 $GLOBALS['HTTP_RAW_POST_DATA']中。

二、演示

1、PHP 如何获取POST过来的XML数据和解析XML数据

比如我们在开发微信企业号时，如何处理用户回复过来的数据呢？
文档：http://qydev.weixin.qq.com/wiki/index.php?title=%E6%8E%A5%E6%94%B6%E6%99%AE%E9%80%9A%E6%B6%88%E6%81%AF
首先查阅文档，可知道：启用开发模式后，当用户给应用回复信息时，微信服务端会POST一串XML数据到已验证的回调URL

假设该URL为 http://www.xxx.com
Http请求方式: POST
http://www.xxx.com/?msg_signature=ASDFQWEXZCVAQFASDFASDFSS×tamp=13500001234&nonce=123412323

POST的XML内容为：

<xml>
   <ToUserName><![CDATA[toUser]]></ToUserName>
   <FromUserName><![CDATA[fromUser]]></FromUserName> 
   <CreateTime>1348831860</CreateTime>
   <MsgType><![CDATA[text]]></MsgType>
   <Content><![CDATA[this is a test]]></Content>
   <MsgId>1234567890123456</MsgId>
   <AgentID>1</AgentID>
</xml>

那么怎么接收这段内容呃？

这时就可以用到：方法2（file_get_contents(“php://input”)）、方法3（$GLOBALS['HTTP_RAW_POST_DATA']）

方法2（file_get_contents(“php://input”)）：

$input = file_get_contents("php://input"); //接收POST数据
$xml = simplexml_load_string($input); //提取POST数据为simplexml对象
var_dump($xml);

方法3（$GLOBALS['HTTP_RAW_POST_DATA']）

$input = $GLOBALS['HTTP_RAW_POST_DATA'];
libxml_disable_entity_loader(true);
$xml = simplexml_load_string($input, 'SimpleXMLElement', LIBXML_NOCDATA);
var_dump($xml);

PHP获取POST数据的3种方法及其代码分析，希望可以帮到你。

转自 PHP100 10 年前

4,236

Creating Retina Images for Your Website

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

retina image comparison

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Simple Retina Images

The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.

<img src="my200x200image.jpg" width="100" height="100">

If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:
ios icon samples

iPhone	57 x 57
Retina iPhone	114 x 114
iPad	72 x 72
Retina iPad	144 x 144

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

	if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

转自 Kyle Larson 13 年前

4,393

JS笔记之对象document

方法：
    write,向HTML动态写入内容
    writeln，多加一个换行
    open,与window.open类似，不建议用
    close,当向新打开的文档对象中写完所有的内容后，一定要调用该方法关闭文档流
    clear,用于清除文档中的所有内容，建议用document.write("");document.close();这两条语句来实现同样的功能。
    getElementById,返回id的对象
    getElementByName,返回name的对象组（注意是数组）
    getElementByTagName,返回标签名的对象组
    createElement,产生一个代表某个HTML元素的对象，随后再其它方法将这个对象插入到文档中。
    createStyleSheet,为当前HTML产生一个样式表或增加一条样式规则。
属性：
    document.cookie

xoyozo 17 年前

3,882

JS笔记之语法

－－－－－－－－－－－－－－－－－－－－
常量：
整型，实型，布尔值，字符串型，null，undefined

变量：var
－－－－－－－－－－－－－－－－－－－－
除法运算：9/4 = 2.25 （而不是2）

－－－－－－－－－－－－－－－－－－－－
系统函数：
1，encodeURI URL编码
   var urlStr=encodeURI("http://www.abc.com/?country=吴&name=z x");
   结果：http://www.abc.com/?country=%E5%90%B4&name=z%20x
2，decodeURI URL解码
3，parseInt 将字符串按指定进制转换成一个整数,参数二表示进制
   parseInt("32",10) 结果：32
   parseInt("3c2",10) 结果：3
   parseInt("c32",10) 结果：NaN
   parseInt("0x18",10) 结果：0
   parseInt("12",16) 结果18
4，parseFloat 将字符串转成小数
   parseFloat("2.5") 结果：2.5
   parseFloat("2.c5") 结果：2
   parseFloat("c2.5") 结果：NaN
5，isNaN 用于检测parseInt和parseFloat返回是否为NaN
   返回true/false
6，escape 编码
   非ASCII替换为%xx
7，unescape 解码
8，eval 将字符串作为JS表达式执行，例
   for(var i=0;i<3;i++) eval("var a"+i+"="+i);
   相当于：
   var a0=0; var a1=1; var a2=2;
－－－－－－－－－－－－－－－－－－－－
对象
1，Object
2，String
   方法：
   indexOf,
   lastIndexOf,
   match,使用正则表达式模式对字符串执行搜索，返回包含该搜索结果的数组
   replace,
   search,使用正则表达式搜索，第一个匹配的字符的位置
   slice,截字符串：参数一，开始位置，参数二，结束位置（不指定或为-1时表示末位置）
   split,返回一个字符串按照某种分隔标志符拆分为若干子字符串时所产生的字符串数组，分隔符可以是多个字符或一个正则表达式，它不作为任何数组元素的一部分返回。
   substr,截字符串：参数一，开始位置，参数二，长度
   toLowerCase,
   toUpperCase,
3，Math（不能用new创建）
   方法：
   abs,绝对值
   sin,cos,正余弦
   asin,acos,反正余弦
   random,返回介于0~1之间的伪随机数
   例：var num = Math.randow();
4，Date
    var currentTime=new Date();
    //var currentTime=new Date(2002,3,4);
    var strDate=currentTime.getYear()+"年";
    strDate+=currentTime.getMonth()+"月";
    strDate+=currentTime.getDate()+"日";
    strDate+=currentTime.getHours()+":";
    strDate+=currentTime.getMinutes()+":";
    strDate+=currentTime.getSeconds()+" ";
    strDate+=currentTime.getMilliseconds();
    alert(strDate);
   结果：2008年1月19日15:27:10 518
－－－－－－－－－－－－－－－－－－－－－－
数组
1，
    var arr=["abc",123,'abc',,3.4];
    for(var i=0;i<arr.length;i++)
    {
        alert(arr[i]);
    }
2，用对象的方式实现数组
    function MyArray(){this.length=arguments.length;for(var i=0;....
3，Array对象
    var arr=new Array(2.4,"abc",2);
    arr.sort(); //排序
    alert的结果为 2 2,4 abc
－－－－－－－－－－－－－－－－－－－－－－－

xoyozo 17 年前

4,607

css之FILTER:progid:DXImageTransform.Microsoft.Gradient使用

FILTER:progid:DXImageTransform.Microsoft.Gradient使用
语法：

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)

属性：

enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
　　true: 默认值。滤镜激活。
　　false:滤镜被禁止。

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
　　其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
　　取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

特性：
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
　　1:默认值。水平渐变。
　　0:垂直渐变。
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时，也可以用十六进制格式： 0xAARRGGBB 。

说明：
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。

示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;}

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}

具体使用

<tr>

</tr>

</table>

4,106

纯真IP数据库格式详解

自从有了IP数据库这种东西，QQ外挂的显示IP功能也随之而生，本人见识颇窄，是否还有其他应用不得而知，不过，IP数据库确实是个不错的东西。如今网络上最流行的IP数据库我想应该是纯真版的（说错了也不要扁我），迄今为止其IP记录条数已经接近30000，对于有些IP甚至能精确到楼层，不亦快哉。2004年4、5月间，正逢LumaQQ破土动工，为了加上这个人人都喜欢，但是好像人人都不知道为什么喜欢的显IP功能，我也采用了纯真版IP数据库，它的优点是记录多，查询速度快，它只用一个文件QQWry.dat就包含了所有记录，方便嵌入到其他程序中，也方便升级。

基本结构

QQWry.dat文件在结构上分为3块：文件头，记录区，索引区。一般我们要查找IP时，先在索引区查找记录偏移，然后再到记录区读出信息。由于记录区的记录是不定长的，所以直接在记录区中搜索是不可能的。由于记录数比较多，如果我们遍历索引区也会是有点慢的，一般来说，我们可以用二分查找法搜索索引区，其速度比遍历索引区快若干数量级。图1是QQWry.dat的文件结构图。

图1. QQWry.dat文件结构

要注意的是，QQWry.dat里面全部采用了little-endian字节序

一. 了解文件头

QQWry.dat的文件头只有8个字节，其结构非常简单，首四个字节是第一条索引的绝对偏移，后四个字节是最后一条索引的绝对偏移。

二. 了解记录区

每条IP记录都由国家和地区名组成，国家地区在这里并不是太确切，因为可能会查出来“清华大学计算机系”之类的，这里清华大学就成了国家名了，所以这个国家地区名和IP数据库制作的时候有关系。所以记录的格式有点像QName，有一个全局部分和局部部分组成，我们这里还是沿用国家名和地区名的说法。

于是我们想象着一条记录的格式应该是: [IP地址][国家名][地区名]，当然，这个没有什么问题，但是这只是最简单的情况。很显然，国家名和地区名可能会有很多的重复，如果每条记录都保存一个完整的名称拷贝是非常不理想的，所以我们就需要重定向以节省空间。所以为了得到一个国家名或者地区名，我们就有了两个可能：第一就是直接的字符串表示的国家名，第二就是一个4字节的结构，第一个字节表明了重定向的模式，后面3个字节是国家名或者地区名的实际偏移位置。对于国家名来说，情况还可能更复杂些，因为这样的重定向最多可能有两次。

那么什么是重定向模式？根据上面所说，一条记录的格式是[IP地址][国家记录][地区记录]，如果国家记录是重定向的话，那么地区记录是有可能没有的，于是就有了两种情况，我管他叫做模式1和模式2。我们对这些格式的情况举图说明：

图2. IP记录的最简单形式

图2表示了最简单的IP记录格式，我想没有什么可以解释的

图3. 重定向模式1

图3演示了重定向模式1的情况。我们看到在模式1的情况下，地区记录也跟着国家记录走了，在IP地址之后只剩下了国家记录的4字节，后面3个字节构成了一个指针，指向了实际的国家名，然后又跟着地址名。模式1的标识字节是0x01。

图4. 重定向模式2

图4演示了重定向模式2的情况。我们看到了在模式2的情况下（其标识字节是0x02），地区记录没有跟着国家记录走，因此在国家记录之后4个字节之后还是有地区记录。我想你已经明白了模式1和模式2的区别，即：模式1的国家记录后面不会再有地区记录，模式2的国家记录后会有地区记录。下面我们来看一下更复杂的情况。

图5. 混和情况1

图5演示了当国家记录为模式1的时候可能出现的更复杂情况，在这种情况下，重定向指向的位置仍然是个重定向，不过第二次重定向为模式2。大家不用担心，没有模式3了，这个重定向也最多只有两次，并且如果发生了第二次重定向，则其一定为模式2，而且这种情况只会发生在国家记录上，对于地区记录，模式1和模式2是一样的，地区记录也不会发生2次重定向。不过，这个图还可以更复杂，如图7：

图6. 混和情况2

图6是模式1下最复杂的混和情况，不过我想应该也很好理解，只不过地区记录也来重定向而已，有一点我要提醒你，如果重定向的地址是0，则表示未知的地区名。

所以我们总结如下：一条IP记录由[IP地址][国家记录][地区记录]组成，对于国家记录，可以有三种表示方式：字符串形式，重定向模式1和重定向模式2。对于地区记录，可以有两种表示方式：字符串形式和重定向，另外有一条规则：重定向模式1的国家记录后不能跟地区记录。按照这个总结，在这些方式中合理组合，就构成了IP记录的所有可能情况。

设计的理由

在我们继续去了解索引区的结构之前，我们先来了解一下为何记录区的结构要如此设计。我想你可能想到了答案：字符串重用。没错，在这种结构下，对于一个国家名和地区名，我只需要保存其一次就可以了。我们举例说明，为了表示方便，我们用小写字母代表IP记录，C表示国家名，A表示地区名：

有两条记录a(C1, A1), b(C2, A2)，如果C1 = C2, A1 = A2，那么我们就可以使用图3显示的结构来实现重用
有三条记录a(C1, A1), b(C2, A2), c(C3, A3)，如果C1 = C2, A2 = A3，现在我们想存储记录b，那么我们可以用图6的结构来实现重用
有两条记录a(C1, A1), b(C2, A2)，如果C1 = C2，现在我们想存储记录b，那么我们可以采用模式2表示C2，用字符串表示A2

你可以举出更多的情况，你也会发现在这种结构下，不同的字符串只需要存储一次。

了解索引区

在"了解文件头"部分，我们说明了文件头实际上是两个指针，分别指向了第一条索引和最后一条索引的绝对偏移。如图8所示：

图8. 文件头指向索引区图示

实在是很简单，不是吗？从文件头你就可以定位到索引区，然后你就可以开始搜索IP了！每条索引长度为7个字节，前4个字节是起始IP地址，后三个字节就指向了IP记录。这里有些概念需要说明一下，什么是起始IP，那么有没有结束IP？假设有这么一条记录：166.111.0.0 - 166.111.255.255，那么166.111.0.0就是起始IP，166.111.255.255就是结束IP，结束IP就是IP记录中的那头4个字节，这下你应该就清楚了吧。于是乎，每条索引配合一条记录，构成了一个IP范围，如果你要查找166.111.138.138所在的位置，你就会发现166.111.138.138落在了166.111.0.0- 166.111.255.255 这个范围内，那么你就可以顺着这条索引去读取国家和地区名了。那么我们给出一个最详细的图解吧：

图9. 文件详细结构

现在一切都清楚了是不是？也许还有一点你不清楚，QQWry.dat的版本信息存在哪里呢？答案是：最后一条IP记录实际上就是版本信息，最后一条记录显示出来就是这样：255.255.255.0255.255.255.255 纯真网络 2004年6月25日IP数据。OK，到现在你应该全部清楚了。

Demo

下一步：我给出一个读取IP记录的程序片断，此片断摘录自LumaQQ源文件edu.tsinghua.lumaqq.IPSeeker.java，如果你有兴趣，可以下载源代码详细看看。

/** *//**
* 给定一个ip国家地区记录的偏移，返回一个IPLocation结构
* @param offset 国家记录的起始偏移
* @return IPLocation对象
*/
private IPLocation getIPLocation(long offset) {
try {
// 跳过4字节ip
ipFile.seek(offset + 4);
// 读取第一个字节判断是否标志字节
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1) {
// 读取国家偏移
long countryOffset = readLong3();
// 跳转至偏移处
ipFile.seek(countryOffset);
// 再检查一次标志字节，因为这个时候这个地方仍然可能是个重定向
b = ipFile.readByte();
if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
ipFile.seek(countryOffset + 4);
} else
loc.country = readString(countryOffset);
// 读取地区标志
loc.area = readArea(ipFile.getFilePointer());
} else if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
loc.area = readArea(offset + 8);
} else {
loc.country = readString(ipFile.getFilePointer() - 1);
loc.area = readArea(ipFile.getFilePointer());
}
return loc;
} catch (IOException e) {
return null;
}
}

/** *//**
* 从offset偏移开始解析后面的字节，读出一个地区名
* @param offset 地区记录的起始偏移
* @return 地区名字符串
* @throws IOException 地区名字符串
*/
private String readArea(long offset) throws IOException {
ipFile.seek(offset);
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1 || b == REDIRECT_MODE_2) {
long areaOffset = readLong3(offset + 1);
if(areaOffset == 0)
return LumaQQ.getString("unknown.area");
else
return readString(areaOffset);
} else
return readString(offset);
}

/** *//**
* 从offset位置读取3个字节为一个long，因为java为big-endian格式，所以没办法
* 用了这么一个函数来做转换
* @param offset 整数的起始偏移
* @return 读取的long值，返回-1表示读取文件失败
*/
private long readLong3(long offset) {
long ret = 0;
try {
ipFile.seek(offset);
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}

/** *//**
* 从当前位置读取3个字节转换成long
* @return 读取的long值，返回-1表示读取文件失败
*/
private long readLong3() {
long ret = 0;
try {
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}

/** *//**
* 从offset偏移处读取一个以0结束的字符串
* @param offset 字符串起始偏移
* @return 读取的字符串，出错返回空字符串
*/
private String readString(long offset) {
try {
ipFile.seek(offset);
int i;
for(i = 0, buf[i] = ipFile.readByte(); buf[i] != 0; buf[++i] = ipFile.readByte());
if(i != 0)
return Utils.getString(buf, 0, i, "GBK");
} catch (IOException e) {
log.error(e.getMessage());
}
return "";
}

代码并不复杂，getIPLocation是主要方法，它检查国家记录格式，并针对字符串形式，模式1，模式2采用不同的代码，readArea则相对简单，因为只有字符串和重定向两种情况需要处理。

总结

纯真IP数据库的结构使得查找IP简单迅速，不过你想要编辑它却是比较麻烦的，我想应该需要专门的工具来生成QQWry.dat文件，由于其文件格式的限制，你要直接添加IP记录就不容易了。不过，能查到IP已经很开心了，希望纯真记录越来越多～。

LumaQQ is a Java QQ client which has a reusablepure Java core and SWT-based GUI

未

转自未知 17 年前

5,300

Sidebar Gadget 开发技巧几则

这不是一篇Vista Sidebar Gadget开发的教程，只是谈谈几则Sidebar Gadget开发中的小技巧。需要Sidebar Gadget开发教程的朋友可以去参考：

开心就好的几个教程（一、二、三、四）
Vista Sidebar Gadgets开发指南

技巧一：如何设计不规则的窗体？
经常会有人问，为什么有些Gadget的窗体是不规则的呢？例如系统自带的那个显示内存和CPU占用率的仪表盘。

其实很简单，制作一个透明背景的png格式的图片。然后将该图片设置为你的gadget的背景图就行了。

技巧二：Gadget的大小为多少合适？
如果处于停靠状态，那么宽度为130px；非停靠状态以及Gadget的高度好像没有限制。但是太大了也不好看。

技巧三：如何察看“System.Debug.outputString()”方法输出的调试信息？
这个问题估计是问的最多的人了。。。呵呵。的确，这个方法输出的调试信息是无法直接看到的。或许有很多工具可以查看系统的调试信息，不过我个人比较喜欢的是 DebugView。
在您的gadget的Javascript代码中任何地方加上“System.Debug.outputString("some text");”，当代码运行到这里，您就会在Debug View中看到输出的调试信息。如下图所示：

技巧四：如何在Gadget中访问网络上的资源？
很简单，使用Javascript发起XMLHttpRequest请求就行了。如果觉得麻烦不想自己写那么多代码，可以采用JQuery里面封装好的方法来发起get或者post请求。

技巧五：如何让flyout窗体、Setting窗体和gadget窗体互相访问变量或者函数？
从Gadget窗体访问flyout窗体: System.Gadget.Flyout.document.parentWindow.<id/function/variable>
从Flyout/Settings窗体访问Gadget窗体：System.Gadget.document.parentWindow.<id/function/variable>

4,887

Sidebar Gadget 的开发的一些问答

Gadget当中如何含有设置界面？即那个类似于小板手似的图标？

其实这个问题的答案很简单，只需要在主界面所关联的Javascript中加入一句：System.Gadget.settingsUI = "settings.htm";即可，该语句中的settings.htm可以取代为其它名字.

如何使Gadget出现Flyout界面？

这个问题如上所示，只需要加一句：System.Gadget.Flyout.file="flyout.htm" 即可，同理，此句中的flyout.htm也可以换成其它的文件名。在需要显示Flyout界面时（比如某个超链接点击事件，或者某个图片控件的双击事件），调用System.Gadget.Flyout.show=true即可，不需要其它设置。当然，你可以在显示时进行一些其它的处理，那么可以调用它的事件函数即System.Gadget.Flyout.onShow(指向一个函数名），其对应的隐藏事件函数为System.Gadget.Flyout.onHide函数

如何得到系统信息？

Sidebar为Javascript扩充了一些API，用于执行外部命令，或者得到系统信息，或者对于Gadget内部本身的调用（如上面的Flyout以及SettingsUI），关于这些API的详细信息，可以参阅：http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/reference/refs.asp 得到更加详细的信息。

如何在没有使用ASP.NET AJAX框架的基础上出现局部刷新效果？

更加简单了，使用Microsoft XMLHTTP这个函数的异步调用方式，关于XMLHTTP的更加详细信息，可以参阅相关信息。其中有关于如何实现异步调用的。另外，在调用时，如果遇到IE缓存问题，可以使用setRequestHeader("If-Modified-Since","0")方式解决（感谢Symbio提供信息），而分析XML，可以使用Microsoft XMLDom来进行。

有些Gadget当置放在Sidebar上显示样式是一种，而拖到桌面上会有另外一种显示方式，这是如何实现的？

这个更简单了，查看了下这些Gadget的源代码，可以知道，通过Gadget的System.Gadget.docked的属性可以得到其是否放置在Sidebar上（当为True时，是在Sidebar上），然后再调用JS来对于其CSS特性进行更改即可。

3,792

Gadget.xml 介绍

<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>时钟</name> <!--定义Gadget名称(1)-->
<namespace>microsoft.windows</namespace> <!--定义Gadget的命名空间，与JS交互-->
<version>1.0.0.0</version> <!--版本信息(2)-->
<author name="Microsoft Corporation"> <!--作者信息(3)-->
<info url="http://go.microsoft.com/fwlink/?LinkId=55696" text="www.gallery.microsoft.com"/> <!--作者网站的链接地址(4)-->
<logo src="logo.png"/><!--作者的Logo信息(5)-->
</author>
<copyright>© 2006</copyright> <!--版权信息(6)-->
<description>查看您所在时区或全球任何城市的时钟。</description> <!--功能描述信息(7)-->
<icons>
<icon height="48" width="48" src="icon.png"/> <!--显示在小工具待选箱时的图标(8)-->
</icons>
<hosts>
<host name="sidebar">
<!--仅支持Sidebar，未来如果大一统了，可能Live.com或者Slideshow都会使用统一的方式-->
<base type="html" apiVersion="1.0.0" src="clock.html"/><!--type仅支持html，未来有可能会支持WPF,WPF/E或者AJAX;src用以指明主界面的HTML源文件-->
<permissions>full</permissions><!--目前仅可以设置Full，请参阅此文-->
<platform minPlatformVersion="1.0"/>
<defaultImage src="drag.png"/><!--在从小工具备选箱用鼠标拖到Sidebar时所显示的图片-->
</host>
</hosts>
</gadget>

5,249

11 12 13 14 15

一、跨子域的iframe高度自适应

二、完全跨域的iframe高度自适应

一、PHP获取POST数据的几种方法

二、演示

Things to Consider When Adding Retina Images

Simple Retina Images

Creating Retina Icons for Your Website

Retina Background Images

JavaScript for Retina Image Replacement

Server-Side Retina Images

Website Optimization for Retina Displays

基本结构

一. 了解文件头

二. 了解记录区

设计的理由

了解索引区

Demo

总结

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (143)

一、跨子域的iframe高度自适应

二、完全跨域的iframe高度自适应

一、PHP获取POST数据的几种方法

二、演示

Things to Consider When Adding Retina Images

Simple Retina Images

Creating Retina Icons for Your Website

Retina Background Images

JavaScript for Retina Image Replacement

Server-Side Retina Images

Website Optimization for Retina Displays

基本结构

一. 了解文件头

二. 了解记录区

设计的理由

了解索引区

Demo

总结

大家在看

最新发布