CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。
在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方式来获得完整的视口体验。
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!遗憾的是,事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化,这使得它几乎毫无用处。最好避免100vh,而是依赖javascript来设置高度,以获得完整的视口体验。
浏览器地址栏运行JavaScript代码 javascript:alert('hello!'); Firefox不支持; 其他浏览器必须手动输入才可执行; 浏览器地址栏运行HTML代码 data:text/html,Hello, world! 在非IE浏览器可以运行 浏览器变成文本编辑器 地址栏输入: data:text/html, <html contenteditable> 控制台输入: document.body.contentEditable='true'; 利用a标签自动
可以使用另一个技巧来获取更多一点的页面实际使用面积,那就是去除IOS设备上的地址栏,可以使用页面加载完之后稍稍滚动页面的招术来实现。
有些网站真是可恶,把右键屏蔽了不给复制,这样还不行(因为可以使用快捷键CTRL+C复制) 他们竟然不让我们选择文字。。。这样下来我们既不能复制,连源代码都不能看了。是可忍孰不可忍,既然这样,那我就不客气了!
上一节我们说地址栏跳转的时候,谈到了浏览器会缓存用户访问url序列,我们可以通过浏览器的前进后退按钮或者通过js提供的方法,访问这个序列里的url,不过关于这一点上一节我们只说了window.history.go,这里补充两个方法。
地址栏url是我们前端的重要组成部分,我们需要用到它进行页面跳转,页面传参。像我就经常用到地址栏传参的方法,但却很少用到修改地址栏的方法,近期就用到了这个修改地址栏参数的需求,发现意外的好用,于是今天就来总结一下地址栏的相关操作。
大家好,又见面了,我是你们的朋友全栈君。 背景 使用window.open()和window.location.href跳转时,新页面的地址栏会显示参数,如下:http://127.0.0.1:
所谓URL转发是当你访问一个域名时,将会自动跳转到您所指定的另一个网络地址(URL)。假设abc.com是您要访问的域名,则通过URL转发服务可以实现当访问http://www.abc.com时,自动转向访问另外一个URL,如:http://www.otherdomain.com/somedir/other.htm。URL转发服务尤其对于拥有一个主网站并同时拥有多个域名的用户比较适用,通过URL转发服务,您就可以轻松实现多个域名指向一个网站或网站子目录了; 另外,通过URL转发服务,可以方便的实现将您的中文域名,设置自动转发到您的英文域名主站点。
window.open 弹出新窗口的命令; ‘page.html’ 弹出窗口的文件名; ‘newwindow’ 弹出窗口的名字(不是文件名),非必须,可用空”代替; height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
移动智能终端设备由于体积限制,一般都没有鼠标、键盘这些输入设备,用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。在移动设备上,类似点击劫持的攻击模式,实现了对用户触摸屏操作的劫持攻击,即界面操作劫持攻击的又一种形式——触屏劫持。
前端涉及到的领域不单单只是PC浏览器了,现在是移动为王的时代,所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。
如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性,则window对象会赋予一个属性,其名字为id属性的值,其值指向该元素
window 是浏览器的顶级对象,当调用 window 下的属性和方法时,可以省略 window。
a javascript implementation of pull to refresh and up to loadmore 移动端下拉刷新、上拉加载更多插件
前端路由是指在浏览器端控制页面内容切换显示的机制。在没有服务器端参与的情况下,前端路由可以根据URL的变化,对应展现不同的内容,实现页面的“伪”跳转。
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以 javascript: 开头后跟
我们知道,JavaScript共由三部分组成:EMCAScript(基本语法)、BOM(浏览器对象模型)、DOM。 在浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作
当你想到路由时,通常会想到类似 React 之类的库。但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢?
更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。 pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。 点击这里查看
其中pushState方法和replaceState方法可以分别增加和替换掉一条记录(必须同源),而不会重新加载页面。
一般来说,我们使用 height:100vh 进行全屏布局,这是一种很方便的响应式方法。
管理平台前端页面需要在当前前端框架结构基础上,在顶级导航中增加两个模块:首页、运维管理模块,以此接入运维平台提供的页面。在访问到内部某个页面后,希望父窗体的地址栏跟随子窗体内部src,同时更新父窗体的地址栏,再刷新页面可以保持在当前访问的页面,同时可以分享链接。
点击上方蓝字“ITester软件测试小栈“关注我,每周一、三、五早上 09:00准时推送,每月不定期赠送技术书籍。
一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的。其实呢不管在哪里用,把原理研究明白就对了。
HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。
本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/pyqt5_webbrowser_download_file/
在手机中,我们通常访问一个网站的做法是打开浏览器在地址栏中输入网站地址,一般来说这样的方法有些烦人,所以,有些网站访问对象通常也会生成一个二维码图片,方便用户直接扫码访问,只要用户手机扫码就能跳转到目标访问网站,或是把相应信息显示在用户手机中。几乎我们所有人都会用手机的扫码功能,但是,你是否想过,如果你信任的应用APP其扫码功能出现安全错误,会发生什么情况?今天,我们就来谈谈Firefox IOS v10浏览器中的扫码XSS漏洞。
②关于chrome版本迭代后,代码失效问题解决方案的文章链接 《关于修改window.navigator.webdriver代码失效问题》
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web 开发与传统的PC 端开发,感觉也没什么不同,但得益于苹果对于智能机的推动,CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。 webkit内核中一些私有的meta标签 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="vi
BOM(Browser Object Model) 浏览器对象模型 ---- 概念 将浏览器各个组成部分封装成对象 组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象 (DOM对象因为十分重要被单独分类) BOM对象组成 Window对象 /* Window窗口对象 1. 创建 2. 方法 1. 与弹出框相关的方法 alert() 显示带有一段消息和一个确认按钮的警告框。
在本文中,我们探讨的对象是IE浏览器,尽管该浏览器略显老态,但是其用户还是很多的,所以不容忽视。我最近对MSRC感到很欣喜,因为他们正在将工作重心移至Edge浏览器、设计漏洞,甚至提高了漏洞赏金,这看起来确实不错。
好了不装了,今天我就化身性感面试官在线问大家一个问题,“谈谈你对前端路由的理解”。看到这个问题,那回答可多了去了。但是换位思考一下,你问候选人这个问题的时候,你想要得到什么答案?以我个人拙见,我希望候选人能从全局解读这个问题,大致以下三点。
作者:尼克陈 https://juejin.cn/post/6917523941435113486
需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置。 实现原理剖析
通常当你在手机上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,若不想让用户这么操作,可以设置方法来禁止:
vue-router在跳转时传递和接收参数方法。 跳转方法 this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。 this.$router.replace() 描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。 this.$router.go(n) 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。
URL跳转 这里说的URL跳转就是用户在访问一个URL时将其跳转到另一个URL上。 常见的应用场景是让多个域名跳转到同一个URL上,(例如让旧域名跳转到新域名上) 将静态文件请求跳转到cdn上等 根据用户设备跳转到不同站点(pc版,wap版)等。 URL跳转可以通过js在页面上设置的window.location实现 也可以通过php设置header来实现 当然也可以用nginx 的 rewrite功能实现
这是我在最近的一个网站项目中频繁用到的几个js函数,非常实用。包括:1、js获取地址栏参数;2、返回cookies字符串中指定键对应的值;3、json格式的日期转换为正常格式4、清除cookie。 1 /** 2 * 1、js获取地址栏参数 3 */ 4 // 获取地址栏的参数数组 5 function getUrlParams() { 6 var search = window.location.search; 7 // 写入数据字典 8 var tmparra
DocumentRoot “D:\website\VueThink\php\public”
前2天把使用Chrome更新到了最新76稳定版,更新了之后发现地址栏默认的 https:// 和 www 被隐藏了,对于开发者来说,总觉得不顺眼啊,以前版本也有被隐藏,可能因为用户反映大,又改为默认显示,76这个版本又被隐藏了,但是用户可以自己设置一下进行显示,具体官方说法如下:
1.下载项目vuethink,本例将项目放置website文件下。 2.后台搭建 本地建站–》以phpstudy为例 1) 新建站点域名 <VirtualHost*:80> DocumentRoot “D:\website\VueThink\php\public” ServerName www.vuethink.com ServerAlias <Directory “D:\website\VueThink\php\public”> Options FollowSymLinks ExecCGI AllowOverride All Order allow,deny Allow from all Require all granted </Directory> </VirtualHost> 2) win+R运行drivers 在etc/hosts文件添加本地ip域名 127.0.0.1www.vuethink.com 3. 前台搭建 1) 运行cmd 进入frontend文件 2) npm install 本项目提示npm WARN package.json xxx@0.0.0 No repository field. 参考地址 :http://hao.jser.com/archive/5381/ 修改:在package.json添加(也可以忽略,不修改) “private”:true, “repository”: { “type”:”git”, “url”:”http://github.com/yourname/repositoryname.git” }, 3) npm run dev 4. 检查php版本 首先thinkphp5.0要求php为5.4以上,所以请先检查php版本。 5. 用户名:admin,密码 :123456 6. 修改文件 1) 修改数据库配置文件Vuethink/php/config/database.php ‘type’ => ‘mysql’, ‘hostname’ => ‘127.0.0.1’, ‘database’ => ‘install’, ‘username’ => ‘root’, ‘password’ => ‘root’, 2) 旧版压缩包,数据表menu url字段开头带有/ 修改前端src/router.js文件 将所有children path 路径前加/ ,再次登录跳转显示正常 新版压缩包,数据表menuurl字段开头不带/ 此处不用修改 3) 修改application\admin\controller\Base.php文件,看到最后: // miss 路由:处理没有匹配到的路由规则 public function miss() { return ; } 将return; 修改为 return “router_error”; (此处修改方便提示) 4) 前后端分离,修改main.js文件 将axios.defaults.baseURL = HOST改为 axios.defaults.baseURL = ‘http://www.vuethink.com/index.php/’ vuethink采用axios请求后端程序,而且此处设置就是让axios每次请求都自动加上baseURL。 window.HOST = HOST改为 window.HOST = ‘http://www.vuethink.com/index.php/’ 这里的意义还没弄明白,后面再补充。
请注意,本文编写于 739 天前,最后修改于 464 天前,其中某些信息可能已经过时。
BOM(Browser Object Model 即:浏览器对象模型),描述与浏览器进行交互的方法和接口。
设为首页 和 收藏本站js代码 兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPCon
前几天有个同学问说他有个 cms 没有 if 判断标签,php 还不会写,我就给他写了个能用的 jq,原理就是通过判断地址栏的链接和代码里导航部分的链接一致的话就高亮,分享出来给大家参考。
领取专属 10元无门槛券
手把手带您无忧上云