注释:在移动端想做一个复制当前URL类似于分享的功能

示例:

<span class="share_btn"><img src="../resource/images/share/13.png"></span>
    <!-- 分享 -->
<div class="share_mask"></div>
<div class="share_box">
<div class="share_list">
<ul>
<li style="display: none;">
<img src="../resource/images/share/share_wx.png">
<p>微信好友</p>
</li>
<li style="display: none;">
<img src="../resource/images/share/share_wxq.png">
<p>微信朋友圈</p>
</li>
<li class="copy_link">
<img src="../resource/images/share/copy_link.png">
<p>复制链接</p>
</li>
</ul>
</div>
<div class="cancel_share">取消</div>
</div>
<script>
/// 分享 lwd
$(".rtn_image").click(function () {
if ($(".rtn_list").css("display") == "none") {
$(".rtn_list").show();
} else {
$(".rtn_list").hide();
}
}); // 分享 lwd
$(".share_btn").click(function(){
$(".share_mask").fadeIn();
$(".share_box").fadeIn();
});
// 取消分享
$(".cancel_share").click(function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
$(".share_mask").click(function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
$(".copy_link").click(function(){
var url = window.location.href + "#share";
var successful;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|iOS)/i)) { //ios
var copyDOM = document.createElement('div'); //要复制文字的节点
copyDOM.innerHTML = url;
document.body.appendChild(copyDOM);
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(copyDOM);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
successful = document.execCommand('copy');
// 移除选中的元素
window.getSelection().removeAllRanges();
$(copyDOM).hide()
}else{
var oInput = document.createElement('input')
oInput.value = url;
document.body.appendChild(oInput)
oInput.select() // 选择对象
successful = document.execCommand('Copy') // 执行浏览器复制命令
oInput.className = 'oInput'
oInput.style.display = 'none'
oInput.remove()
}
if(successful){
// layer.msg("复制成功")
layer.msg("复制成功",{time:2000},function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
}else{
layer.msg("复制失败",{time:2000},function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
}
});
</script>
<style>
.share_btn {
/* display: block; */
overflow: hidden;
position: absolute;
top: .1rem;
line-height: 0.7rem;
right: .2rem;
width: 0.36rem;
color: #333;
font-size: .28rem;
}
.share_btn>img{
width: 100%;
}
/* 分享 */
.share_mask{
position: fixed;
width: 100%;
height:100%;
background: rgba(0,0,0,0.5);
left:0;
top:0;
z-index:110;
display: none;
}
.share_box{
position: fixed;
bottom: 0;
width: 100%;
height:2.7rem;
left: 0;
background-color: #f8f8f8;
z-index:111;
display: none;
}
.share_box .share_list{
height:1.9rem;
}
.share_box .share_list ul{
display: flex;
justify-content: space-around;
}
.share_box .share_list ul li{
padding-top:0.22rem;
width: 33%;
}
.share_box .share_list ul li img{
width: 1rem;
height:1rem;
display: block;
margin:0 auto;
}
.share_box .share_list ul li p{
font-size:0.22rem;
color: #333;
line-height: 0.56rem;
text-align: center;
}
.cancel_share{
height:0.8rem;
line-height: 0.8rem;
font-size:0.28rem;
text-align: center;
color: #333;
background-color: #fff;
}
.layui-layer-dialog .layui-layer-content {
position: relative;
padding: 20px;
line-height: 24px;
word-break: break-all;
overflow: hidden;
font-size: 14px;
overflow-x: hidden;
overflow-y: auto;
color: #ffffff;
}
</style>

移动端复制当前页面链接(URL)分享的更多相关文章

  1. 百度APP移动端网络深度优化实践分享(二):网络连接优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<二>连接优化>,感谢原作者的无私分享. 一.前言 在<百度APP移动端网 ...

  2. 百度APP移动端网络深度优化实践分享(一):DNS优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...

  3. 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<三>弱网优化>,感谢原作者的无私分享. 一.前言 网络优化解决的核心问题有三个 ...

  4. Javascript 获取链接(url)参数的方法

    有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值.本文给出的就是这个流程的具体实现方法. 当然,我们也可以用正则直接匹配,文章中也给出了一个 ...

  5. MySql 链接url 参数详解

    最近 整理了一下网上关于MySql 链接url 参数的设置,有不正确的地方希望大家多多指教: mysql JDBC URL格式如下: jdbc:mysql://[host:port],[host:po ...

  6. wordpress 获取分类ID,分类标题,分类描述,分类链接url函数

    get_cat_ID()    根据分类名称获取分类ID   ///// get_cat_name()    根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...

  7. jquery preventDefault() 方法防止打开不是本站的链接URL

    将以下代码保存为test.html,用浏览器打开即可测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. PC端实现浏览器点击分享到QQ好友,空间,微信,微博等

    网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...

  9. 腾讯短链接url生成接口/腾讯短网址在线生成/新浪微博短链接生成器的分享

    在通常情况下,URL是由系统生成的,通常包括URI路径,多个查询参数,可以对参数进行加密和解密. 当人们要分享某个URL,比如短信,邮件,社交媒体,这就需要短URL.而短网址,顾名思义就是在长度上比较 ...

随机推荐

  1. 服务器配置好但Idea/Datagrip无法连接远程数据库的解决方案

    服务器没有开放端口3306,在云服务控制台配置安全组即可.

  2. java CAS和AQS

    全面了解Java中的CAS机制 https://www.jb51.net/article/125232.htm https://www.cnblogs.com/javalyy/p/8882172.ht ...

  3. IDEA debug模式鼠标悬停提示变量值

  4. springboot学习2

    项目导入eclipse 先检测是否安装有gradle插件 然后点击  finish 按钮 hello world实例 Application.java package com.example.demo ...

  5. 阅读脚本控制pwm代码

    在现有的项目上通过SoC的EHRPWM3B管脚产生PWM脉冲做为摄像头的framsync信号. datasheet描述: PWMSS:PWM Subsystem Resources eHRPWM: E ...

  6. RHEL7使用systemctl管理服务

    1.   systemctl命令 说明 systemctl    start   [unit type] 启动服务 systemctl    stop   [unit type] 停止服务 syste ...

  7. AIX中crontab和at 定时任务

    1.crontab crontab文件用于在指定日期和时间周期性地执行作业 crontab 作业存放在/var/spool/cron/crontabs/$USER cron根据crontab文件项运行 ...

  8. Codeforces 902 树同型构造 多项式长除法构造(辗转相除法)

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  9. idea控制台搜索框

    https://blog.csdn.net/honnyee/article/details/82772948

  10. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...