雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第14页

去分类设置中添加分类描述吧

前端开发必知的15个jQuery小技巧

2016-11-11admin阅读(1470)

下面这些简单的小技巧能够帮助你玩转jQuery。

1、返回顶部按钮

通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：

1
2
3
4
5
6
7
// Back to top
$('.top').click(function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到它滚动到文档的顶部。

注：小心scrollTop的一些错误行为。

2、预加载图像

如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像：

1
2
3
4
5
6
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

3、检查图像是否加载

有时为了继续脚本，你可能需要检查图像是否全部加载完毕：

1
2
3
$('img').load(function () {
console.log('image load successful');
});

你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。

4、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你：

1
2
3
4
5
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});

即使没有任何断掉的链接，加上这一段代码也不会让你有任何损失。

5、悬停切换类

假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。那么你可以在用户悬停的时候添加类到元素中，反之则删除类：

1
2
3
4
5
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法：

1
2
$('.btn').hover(function () {
$(this).toggleClass(

来源:前端李李

再来说说跨域获取数据用的jsonp

2016-10-27admin阅读(1355)评论(0)

今天看到大家都在说这个,写了个小demo练习一下,记得很久以前写过一次,但是太久了忘了~

首先我们发送jsonp请求到服务器!

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $.ajax({
        type: "get",
        async: false,
        url: "http://he29.com",
        dataType: "jsonp",
        success: function(data) {
            alert(data.name);
        },
    });
    </script>

服务器响应jsonp请求

1
2
3
4
5
6
7
8
$callback = $_GET ['callback'];
        $json = json_encode(['name'=>'天明']);
        //如果是jsonp请求,
        if($callback){
            echo $callback . "(" . $json . ")";
        }else{
            echo $json;
        }

页面就能收到响应了~

1
jQuery17206509616867473036_1477536500345({"name":"\u5929\u660e"})

20160329105332

玩一玩为Api而生的ThinkPHP5.0

2016-10-24admin阅读(1634)评论(0)

今天看了看为Api而生的ThinkPHP5.0, 感觉还不错,想玩好这个框架,就先抛弃之前对thinkphp的认识吧,这个变化很大,

路由什么的有点麻烦,就先用默认的;路由,看了看ORM,模型和控制器等等~~

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<?php
namespace app\index\controller;
use app\common\model\produce;
use app\common\model\test;
use think\Controller;
use think\Request;
use think\Db;
use think\Cache;
use think\Session;
use think\Cookie;
use think\File;
 
class Index extends Controller
{
    public function _empty($name){
        return $this->showCity($name);
    }
    protected function showCity($name)
    {
        //和$name这个城市相关的处理
        return '当前城市' . $name;
    }
    public function edit($id)
    {
        return 'edit:'.$id;
    }
    public function Request()
    {
        Request::instance()->has('id','get');
        Request::instance()->has('name','post');
    }
    public function index(){
        $data = db('produce')->where('produce_id','>',1)->find();
        $data = Db::table('produce')->where('produce_id','>',1)->find();
        $this->find();
    }
    public function insert(){
        $data = ['mobile' => 'bar', 'openid' => 'foo'];
        $resullt = Db::table('user')->insert($data);
        p($resullt);
    }
    public function update(){
        Db::table('user')
            ->where('id', 1)
            ->update([
                'login_time'  => ['exp','now()'],
                'login_times' => ['exp','login_times+1'],
            ]);
        //更新某一个
        Db::table('think_user')
            ->where('id',1)
            ->setField('name', 'thinkphp');
    }
    public function del(){
        Db::table('think_user')->delete(1);
        Db::table('think_user')->delete([1,2,3]);
        // 条件删除
        Db::table('think_user')->where('id',1)->delete();
        Db::table('think_user')->where('id','<',10)->delete();
    }
    public function find(){
        Db::table('user')
            ->where('name','like','%thinkphp')
            ->where('status',1)
            ->find();
        //SELECT * FROM `user` WHERE `name` LIKE '%thinkphp' AND `status` = 1 LIMIT 1
        Db::table('user')
            ->where('name','like','%thinkphp')
            ->whereOr('openid','like','%thinkphp')
            ->find();
        //SELECT * FROM `user` WHERE `name` LIKE '%thinkphp' OR `openid` LIKE '%thinkphp' LIMIT 1
    }
    public function make(){
        Db::table('user')
            ->where('uid',1)
            ->field('id,name,email')
            ->find();
        Db::table('user')
            ->where('status',1)
            ->where('id',1)
            ->delete();
        Db::listen(function($sql, $time, $explain){
            // 记录SQL
            echo $sql. ' ['.$time.'s]';
            // 查看性能分析结果
            dump($explain);
        });
    }
    public function count(){
        Db::table('think_user')->count();
        Db::table('think_user')->count('id');
        Db::table('think_user')->max('score');
        Db::table('think_user')->where('score>0')->min('score');
        Db::table('think_user')->avg('score');
        Db::table('think_user')->sum('score');
    }
    public function shiwu(){
        // 启动事务
        Db::startTrans();
        try{
            Db::table('think_user')->find(1);
            Db::table('think_user')->delete(1);
            // 提交事务
            Db::commit();
        } catch (\Exception $e) {
            // 回滚事务
            Db::rollback();
        }
    }
    public function cache(){
        Cache::set('name',123,3600);
        // name自增（步进值为1）
        Cache::inc('name');
        // name自增（步进值为3）
        Cache::inc('name',3);
        // name自减（步进值为1）
        Cache::dec('name');
        // name自减（步进值为3）
        Cache::dec('name',3);
        //删除缓存
        Cache::rm('name');
        //获取并删除缓存
        Cache::pull('name');
        //不存在则写入缓存数据后返回
        Cache::remember('name',function(){
            return time();
        });
        //缓存标签
        Cache::tag('tag')->set('name1','value1');
        Cache::tag('tag')->set('name2','value2');
        // 或者批量设置缓存标签
        Cache::set('name1','value1');
        Cache::set('name2','value2');
        Cache::tag('tag',['name1','name2']);
        // 清除tag标签的缓存数据
        Cache::clear('tag');
    }
    public function session(){
        Session::set('name','thinkphp');
        Session::get('name');
        // 赋值（当前作用域）
        Session::set('name','thinkphp');
        // 赋值think作用域
        Session::set('name','thinkphp','think');
        // 判断（当前作用域）是否赋值
        Session::has('name');
        // 判断think作用域下面是否赋值
        Session::has('name','think');
        // 取值（当前作用域）
        Session::get('name');
        // 取值think作用域
        Session::get('name','think');
        // 删除（当前作用域）
        Session::delete('name');
        // 删除think作用域下面的值
        Session::delete('name','think');
        // 指定当前作用域
        Session::prefix('think');
    }
    public function cookie(){
        // 设置Cookie 有效期为 3600秒
        Cookie::set('name','value',3600);
        // 设置cookie 前缀为think_
        Cookie::set('name','value',['prefix'=>'think_','expire'=>3600]);
        // 支持数组
        Cookie::set('name',[1,2,3]);
        //判断
        Cookie::has('name');
        // 判断指定前缀的cookie值是否存在
        Cookie::has('name','think_');
        //获取
        Cookie::get('name');
        // 获取指定前缀的cookie值
        Cookie::get('name','think_');
        //删除cookie
        Cookie::delete('name');
        // 删除指定前缀的cookie
        Cookie::delete('name','think_');
    }
    public function file(){
    }
}

下面是模型有关的

 

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?php
 
namespace app\common\model;
use think\Model;
 
class produce extends Model{
    protected $pk = 'produce_id';
    protected $autoWriteTimestamp = true;//自动写入时间戳
    public function __construct()
    {
        parent::__construct();
    }
    public function index(){
        $user = produce::create([
            'name'  =>  'thinkphp',
            'email' =>  'thinkphp@qq.com'
        ]);
        echo $user->name;
    }
    public function updates(){
        //取出id为1的数据,并且更新后保存
        $user = produce::get(1);
        $user->name     = 'thinkphp';
        $user->email    = 'thinkphp@qq.com';
        $user->save();
 
        $user = new produce;
        // save方法第二个参数为更新条件
        $user->save([
            'name'  => 'thinkphp',
            'email' => 'thinkphp@qq.com'
        ],['id' => 1]);
 
        $user = new produce();
            // 过滤post数组中的非数据表字段数据
        $user->allowField(true)->save($_POST,['id' => 1]);
 
        $user = new produce();
        // post数组中只有name和email字段会写入
        $user->allowField(['name','email'])->save($_POST, ['id' => 1]);
    }
    public function statisUpdate(){
        //模型支持静态方法直接更新数据
        produce::where('id', 1)
            ->update(['name' => 'thinkphp']);
        produce::update(['id' => 1, 'name' => 'thinkphp']);
        //闭包更新
        $user = new produce;
        $user->save(['name' => 'thinkphp'],function($query){
            // 更新status值为1 并且id大于10的数据
            $query->where('status', 1)->where('id', '>', 10);
        });
    }
    public function del(){
        produce::destroy(1);
        // 支持批量删除多个数据
        produce::destroy('1,2,3');
        // 或者
        produce::destroy([1,2,3]);
        // 删除状态为0的数据
        produce::destroy(['status' => 0]);
        //还支持使用闭包删除
        produce::destroy(function($query){
            $query->where('id','>',10);
        });
        //通过数据库类的查询条件删除
        produce::where('id','>',10)->delete();
    }
    public function get_once(){
        //取出主键为1的数据
        $user = produce::get(1);
        echo $user->name;
        // 使用数组查询
        $user = produce::get(['name' => 'thinkphp']);
        // 使用闭包查询
        $user = produce::get(function($query){
            $query->where('name', 'thinkphp');
        });
        echo $user->name;
    }
    public function juhe_find(){
        //静态查询
        produce::count();
        produce::where('status','>',0)->count();
        produce::where('status',1)->avg('score');
        produce::max('score');
        //动态查询
        $user = new produce;
        $user->count();
        $user->where('status','>',0)->count();
        $user->where('status',1)->avg('score');
        $user->max('score');
    }
    //自动更新时间戳
    public function timeSet(){
        $user = new produce();
        $user->name = 'THINKPHP';
        $user->save();
        echo $user->create_time; // 输出类似 1462545582
        echo $user->update_time; // 输出类似 1462545582
    }
    //自动完成
    protected $auto = ['name', 'ip', 'password'];
    protected $insert = ['status' => 1];
    protected $update = [];
    protected function setNameAttr($value)
    {
        return strtolower($value);
    }
    protected function setIpAttr()
    {
        return request()->ip();
    }
    protected function setPasswordAttr($value)
    {
        return md5($value);
    }
    //自动完成结束
    public function autoOver(){
    }
}

任何一个方法使用前,请确保在头部命名空间的地方引入~

 

chrome 浏览器移动端远程调试网页

2016-09-26admin阅读(1721)评论(0)

在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备（Chromemenu > More tools > Inspect Devices），或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect

USB连接手机后打开调试模式

QQ截图20160926183448

 

就能看到手机当前打开的页面了,

手机开始点击链接切换网页,Pc端同步也在改变

QQ截图20160926183653

QQ截图20160926183703

就这样了,可以查看元素~

Js子页面调用父页面方法涉及到的跨域问题及处理

2016-09-23admin阅读(4733)评论(0)

今天做图片上传功能模块, 就是当前页面点击打开一个frame层, 在frame 里面上传图片,如果图片上传完成,Js 在子页面通知父页面处理完成的数据信息,因为上传的frame和使用的不是同一个网站,所以涉及到了跨域的问题!

首先,使用layer的弹窗插件,把之前处理好的frame 打开:

1
2
3
4
5
6
7
8
9
10
11
function upload() {
    //iframe层
    layer.open({
        type: 2,
        title: '上传图片',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '450px'],
        content: 'http://file.XXX.com/uploads.php' //iframe的url
    });
}

这里当前页面的域名是 www.xxx.com

具体iframe 里面,已经处理好了图片上传功能,并在上传完成后通知父页面

1
2
3
4
5
6
onSuccess: function(file, response){          // 文件上传成功的回调方法
    console.info("此文件上传成功：");
    console.info(file.name);
    $.fn.cache('<?php echo isset($_GET['name'])?$_GET['name']:'imgData'; ?>',response);
    window.parent.UploadSuccess(response);//调用父页面
},

这里域名是 file.xxx.com

父页面的处理逻辑

1
2
3
4
5
6
7
8
9
10
11
function UploadSuccess(data) {
    var data = Function('return '+ data +'')();
    if(data.code > 0){
        layer.msg('上传成功',{shadow:false,time:2000},function(){
            layer.closeAll();
            toDealwith(data);//处理图片数据
        })
    }else{
        layer.msg('上传失败');
    }
}

然而因为域名不同,所以会报错

QQ图片20160923162914

所以我们这里需要做一个设置:
document.domain = “xiangmijie.com”;

两个页面加入,这样的话,就在同一域下面

QQ图片20160923163224

然后调用成功!

 

call_user_func_array 这个函数什么时候用

2016-09-02admin阅读(5915)评论(2)

call_user_func_array是个很神奇的函数，在你PHP水平成长到一定高度的时候，你就能深刻理解它的意义了。这里我给你举两个适合用call_user_func_array的例子，帮助你理解

场景一：参数数目不确定

函数的参数是用户传入的，而且参数的数目不确定。如果不用call_user_func_array你会怎么做？一些PHP框架可以将$_GET参数自动映射到方法，就是这样实现的。

场景二：用于函数回调

回调函数可能是一个普通函数，可能是类方法，也可能是静态方法。如果使用call_user_func_array，你就不用去判断方法的类型。
普通方法和静态方法， 都可以通过 类名：：方法名调用啊 ，只不过普通方法貌似很少这么干的？
参数不确定 ，php不是有func_get_args()方法可以接受全部的参数数组吗？
这是一个设计上的问题。func_get_args是可以实现，但这就要求编写函数的用户有要实现更多的逻辑。
如果你是一个框架的设计者，你要用户自己写func_get_args，自己写参数处理的过程吗？
有时这个函数是来自某个类库的，难道你要修改源码么？

给你一个回调函数的例子，如果不用call_user_func_array要写多少代码？

1
2
3
4
5
6
7
<?php
function call_func(callback){
    return call_user_func_array(callback, array(1,2));
}
call_func(array($obj, 'method'));
call_func(array('classname', 'method'));
call_func('simple_function');

demo

1
2
3
4
5
6
7
8
9
10
Class ClassA
{
function bc($b, $c) {
$bc = $b + $c;
echo $bc;
}
}
call_user_func_array(array('ClassA','bc'), array("111", "222"));
//显示 333
?>

 

微店开放平台与微韵商城的一些简单构思~~

2016-08-13admin阅读(2316)评论(0)

前言::

最近微韵商城完成后,因为各种发货上货问题而苦恼不已,之前也简单看了看微店的开放平台,最近有了一些构思,

以后可能用户在微店商城里发货,直接在微韵商城里一键同步,就可以把商品同步过来,而且,可以在微韵后台设置发货商家下载,在微店App后台也可以管理双向同步~~

http://wiki.open.weidian.com/api/95

Api文档~ 开放的接口很多~

给我更多的时间~~

（更多…）

重新拾起学习正则表达式的乐趣

2016-06-24admin阅读(1927)评论(0)

00:00/00:00

正则表达式真像一块心病,有时间关键时刻就不知道怎么处理

今天看到一篇文章,突然,感觉来了,尝试写了几个真个表达式!

记住正则语法最好的办法就是记住这三样东西：
Bracket（括号）,
caret（插入符号）和Dollars（美元符号）。
在正则表达式中有3种类型的括号
方括号 “[“和花括号“{“ 。 方括号”[“内是需要匹配的字符，花括号”{“内是指定匹配字符的数量。 圆括号“(“ 则是用来分组的。 插入符号 “^” 表示正则式的开始。 美元符号“$” 表示正则式的结束。
现在你知道上面的3个语法后，你就可以写世界上任何一条验证规则了。比如下面的例子就很好的说明了上面3条正则语法是如何协调运作的。
让我们开始第一个验证，输入的字符在a-g之间？

1
[a-g]

输入的字符在a-g之间并且长度为3？

1
[a-g]{3}

输入的字符在a-g之间并且最大长度为3最小长度为1？

1
[a-g]{1,3}

我如何在匹配像91230456, 01237648那样的固定8位数？

1
^[0-9]{8}$

如何验证最小长度为3最大长度为7的数字，如：123, 1274667, 87654？

1
^[0-9]{3,7}$

如何验证像LJI1020那样的发票编号，前3个是字母剩余为8位长度的数字？ 前三个是字母：

1
^[a-z]{3}

后面是8位长度的数字：

1
[0-9]{8}

所以整个表达式为：

1
^[a-z]{3}[0-9]{7}$

接下来:
一个完整的简单网址匹配

1
^www[.][a-z]{1,15}[.](com|org)$

如何验证email格式

1
^[0-9A-za-z]{1,10}@[0-9a-zA-z].(com|cn|org)$

你也可以用以下的快捷命令来简化你的正则表达式

1
2
3
4
5
[0-9] \d
[a-z][0-9][_] \w
0次或多次发生 *
至少一次发生 +
0次或1次发生 ?

V5N[TVF]R2HP<code>68PA6</code>SPGD” width=”181″ height=”188″ class=”alignnone size-full wp-image-599″ /></a></p> </div></article><article class=

iframe高度自适应内容的一些问题

2016-06-18admin阅读(1570)评论(0)

00:00/00:00
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

iframe内容未知，高度可预测

这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用javascript改变高度。常用的兼容代码有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
 

演示地址

此处内容需要登录并 发表评论 才可见

只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码，我们一般为了不污染html代码，建议使用上面的代码。

1
<iframe width="300" height="150" src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

演示二

多个iframe的情况下

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
31
32
33
34
35
36
37
38
39
40
<script>// <![CDATA[
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"];
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes";
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] &amp;&amp; !window.opera)
{
dyniframe[i].style.display="block";
if (dyniframe[i].contentDocument &amp;&amp; dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document &amp;&amp; dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) &amp;&amp; iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize);
else
window.onload=dyniframesize;
// ]]></script>

演示三

针对知道的iframe的ID调用

1
2
3
4
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}
 

演示四

内容宽度变化的iframe高度自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
<iframe width="300" height="150" src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe><script type="text/javascript">// <![CDATA[
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
// ]]></script>

演示五
打开调试运行窗口可以看到运行。

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。

a.html中包含iframe:

1
<iframe width="300" height="150" style="border: 0px;" src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no"></iframe>

在c.html中加入如下代码：

1
2
3
4
5
6
7
8
<iframe width="0" height="0" style="display: none;" id="c_iframe" src="http://www.a.com/agent.html"></iframe><script type="text/javascript">// <![CDATA[
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
})();
// ]]></script>

最后，agent.html中放入一段js:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">// <![CDATA[
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
// ]]></script>

agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）
演示六

转载来自 : http://caibaojian.com/iframe-adjust-content-height.html

lrz 图片压缩转base64字符串上传服务器方法

2016-05-24admin阅读(7424)评论(0)

00:00/00:00

hs-xiu (1)
之前公司移动端上传图片总是遇到用户拍的照片很大,大概2-4M导致上传异常的慢,后来找到这个插件,解决了我们的问题,把图片压缩后转为base64字符串,然后服务器端收到字符串后还原图片,实现上传,

git地址: https://github.com/think2011/localResizeIMG

介绍: 前端本地客户端压缩图片，兼容IOS，Android，PC、自动按需加载文件

官方演示地址: http://think2011.net/localResizeIMG/test/

演示地址2: http://m.kuaiyoujia.com/index.php/bzf/house/whole

首先前端代码很简单的几行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="lrz.bundle.js"></script>
<input type="file" name="FileData" class="uploadImg1" accept="image/*">
</body>
<script type="text/javascript">
$('.uploadImg1').change(function() {
var that = this;
lrz(that.files[0], {
width: 1000
})
.then(function (rst) {
console.log(rst);
})
.catch(function (err) {
console.log('处理失败会执行');
})
.always(function () {
console.log('不管是成功失败，都会执行');
});
});
</script>

成功后的rst里面包含了我们需要的所有信息

3

接下来直接把这些字符串发送给后台就可以了,然后我们看看服务端该怎么处理

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
/**
     * @param $formFile 文件字符串 整个base64
     * @param $ext 文件后缀
     * @param $rots 路径
     * @param $uid  上传用户的uid
     */
    public function index($formFile,$ext,$rots)
    {
        if(IS_POST){
            $formFile = explode(',', $formFile);
            $img = base64_decode($formFile[1]);//切割字符串得到图片base64编码
            if ($formFile) {
                $u = uniqid();//获取随机字符
                $path = './Uploads/App/' . $u . $ext;//拼接路劲
                $a = file_put_contents($path, $img);//返回的是字节数
                 //代码执行到这里已经上传成功了.
                //$result = $this->qiniu($path,$ext,$rots); //调用七牛接口上传
                if ($result != false) {
                    $this->delImg($path);//删除成功!
                    ajaxReturn(array('code'=>1,'mes'=>'上传成功'));
                }
            }
        }else{
            ajaxReturn(array('code'=>-9,'mes'=>'请使用正确的方式提交'));
        }
    }

就这样,我们就很轻松把图片上传到了服务器,当然还可以跨域上传!

特别注意的是:

1
2
$formFile = explode(',', $formFile);
$img = base64_decode($formFile[1]);//切割字符串得到图片base64编码

因为我们发给服务器的字符串开头是这样 : data:image/jpeg;base64, 这一部分不是我们图片的base64编码,所以需要去掉,只留下后面的部分!

  • 上一页
  • 1
  • ···
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 9年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图