AngularJS内置服务获取屏幕高度，宽度，页面title，URL协议，URL主机，端口号及URL的hash部分，URL地址

最新推荐文章于 2020-12-18 23:52:42 发布

Dewey666

最新推荐文章于 2020-12-18 23:52:42 发布

阅读量4k

点赞数

分类专栏：效果初现文章标签： scope作用域 timeout服务 window服务 document服务 location服务

本文链接：https://blog.csdn.net/IT666DHW/article/details/78231970

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS内置服务获取屏幕高度，宽度，页面title，URL协议，URL主机，端口号及URL的hash部分，URL地址.html</title>



<script src="../js/angular.js"></script>
<script>
var my=angular.module("myApp",[]);
my.controller("myCtrl",function ($scope, $window, $document, $location,$timeout) {
// 1.高度和宽度打开页面2秒后显示出来
$timeout(function(){
$scope.wHeigth=$window.innerHeight;//获取屏幕的高度
$scope.wWidth=$window.innerWidth;//获取屏幕的宽度
},2000);

// 2.title，协议，主机在打开页面3秒后显示出来
$timeout(function(){
//$document[0].title="呵呵";//设置页面title
$scope.title=$document[0].title;//获取页面title
$scope.protocol=$location.protocol();//URL协议部分
$scope.hostname=$location.host();//URL主机部分名称
},3000);

// 3.端口号，url地址,URL中的hash部分在打开页面5秒后，弹出提示框询问是否显示，若点击是，则展示出来，否则不展示
$timeout(function(){
var flag = confirm("是否显示其余内容？");

if(flag){
alert("嘿嘿，那我就显示喽 ~ ~ ~ ");
$scope.port=$location.port();//端口号
$location.path("aaa");//设置URL中的hash部分
$scope.path=$location.path();//获得URL中的hash部分:#代表网页中的一个位置。#右面的字符，就是该位置的标识符,即hash部分。
$scope.absUrl=$location.absUrl();//获得URL地址
}
},5000);
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<p>屏幕的高度：{{wHeigth}}</p>
<p>屏幕的宽度：{{wWidth}}</p>
<p>页面title：{{title}}</p>
<p>URL协议：{{protocol}}</p>
<p>URL主机：{{hostname}}</p>
<p>端口号：{{port}}</p>
<p>URL中的hash部分：{{path}}</p>
<p>URL地址：{{absUrl}}</p>
</body>
</html>

Dewey666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS内置服务获取屏幕高度，宽度，页面title，URL协议，URL主机，端口号及URL的hash部分，URL地址

日考12：AngularJS内置服务获取屏幕高度，宽度，页面title，URL协议，URL主机，端口号及URL的hash部分，URL地址.html 1.高度和宽度打开页面2秒后显示出来2.title，协议，主机在打开页面3秒后显示出来3.端口号，url地址在打开页面5秒后，弹出提示框询问是否显示，若点击是，则展示出来，否则不展示 -->
复制链接

扫一扫