jQuery mobile转换url地址及获取url中目录部分的方法

前端技术 2023/09/06 JavaScript

path.makeUrlAbsolute() 把相对URL转化为绝对URL

jQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl )

把相对URL转化为绝对URL的方法。这个函数返回一个字符串，绝对URL。

relUrl：相对网址。类型：字符串。

absUrl：绝对网址。类型：字符串。

<!doctype html>
<html lang=\"en\">
<head>
 <meta charset=\"utf-8\">
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
 <title>jQuery.mobile.path.makeUrlAbsolute demo</title>
 <link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css\">
 <script src=\"http://code.jquery.com/jquery-1.9.1.min.js\"></script>
 <!-- The script below can be omitted -->
 <script src=\"/resources/turnOffPushState.js\"></script>
 <script src=\"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js\"></script>
 <style>
 #myResult{
  border: 1px solid;
  border-color: #108040;
  padding: 10px;
  }
 </style>
</head>
<body>
 
<div data-role=\"page\">
 
 <div data-role=\"content\">
  <p>The absoulte URL used is http://foo.com/a/b/c/test.html</p>
  <input type=\"button\" value=\"file.html\" id=\"button1\" class=\"myButton\" data-inline=\"true\">
  <input type=\"button\" value=\"../../foo/file.html\" id=\"button2\" class=\"myButton\" data-inline=\"true\">
  <input type=\"button\" value=\"//foo.com/bar/file.html\" id=\"button3\" class=\"myButton\" data-inline=\"true\">
  <input type=\"button\" value=\"?a=1&b=2\" id=\"button4\" class=\"myButton\" data-inline=\"true\">
  <input type=\"button\" value=\"#bar\" id=\"button5\" class=\"myButton\" data-inline=\"true\">
  <div id=\"myResult\">The result will be displayed here</div>
 </div>
</div>
<script>
$(document).ready(function() { 
  $( \".myButton\" ).on( \"click\", function() { 
   var absUrl = $.mobile.path.makeUrlAbsolute( $( this ).attr( \"value\" ), \"http://foo.com/a/b/c/test.html\" ); 
  $( \"#myResult\" ).html( absUrl );
 }) 
});
</script>
 
</body>
</html>

path.get() 确定URL中的目录部分

jQuery.mobile.path.get( url )

url：只有一个参数。类型：字符串。

确定URL中的目录部分的实用方法。如果URL没有斜线，URL的一部分被认为是一个文件。这个函数返回一个给定的URL目录部分。

<!doctype html>
<html lang=\"en\">
<head>
 <meta charset=\"utf-8\">
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
 <title>jQuery.mobile.path.get demo</title>
 <link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css\">
 <script src=\"http://code.jquery.com/jquery-1.9.1.min.js\"></script>
 <!-- The script below can be omitted -->
 <script src=\"/resources/turnOffPushState.js\"></script>
 <script src=\"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js\"></script>
 <style>
 #myResult{
  border: 1px solid;
  border-color: #108040;
  padding: 10px;
  }
 </style>
</head>
<body>
 
<div data-role=\"page\"> 
 <div data-role=\"content\">
  <input type=\"button\" value=\"http://foo.com/a/file.html\" id=\"button1\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"http://foo.com/a/\" id=\"button2\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"http://foo.com/a\" id=\"button3\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"//foo.com/a/file.html\" id=\"button4\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"/a/file.html\" id=\"button5\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"file.html\" id=\"button6\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"/file.html\" id=\"button7\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"?a=1&b=2\" id=\"button8\" class=\"myButton\" data-inline=\"true\" />
  <input type=\"button\" value=\"#foo\" id=\"button9\" class=\"myButton\" data-inline=\"true\" />
  <div id=\"myResult\">The result will be displayed here</div>
 </div>
</div>
<script>
$(document).ready(function() { 
  $( \".myButton\" ).on( \"click\", function() { 
   var dirName = $.mobile.path.get( $( this ).attr( \"value\" ) ); 
  $( \"#myResult\" ).html( String( dirName ) );
 }) 
});
</script>
 
</body>
</html>

本文地址：https://www.stayed.cn/item/14742

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案