精华内容
下载资源
问答
  • 主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法、split拆分法等,需要的朋友可以参考下
  • 主要介绍了JS中通过url动态获取图片大小的方法小结,本文给大家列举了两种方法,大家可以尝试下看哪种方法好用,感兴趣的朋友跟随小编一起看看吧
  • javascript怎么获取指定url网页中的内容 一、总结 一句话总结:推荐jquery中ajax,简单方便。 1、js能跨域操作么? javascript出于安全机制不允许跨域操作的。 二、用php获取 javascript出于安全机制不...

    javascript怎么获取指定url网页中的内容

    一、总结

    一句话总结:推荐jquery中ajax,简单方便。

     

    1、js能跨域操作么?

    javascript出于安全机制不允许跨域操作的。

     

     

    二、用php获取

    javascript出于安全机制不允许跨域操作的。因此不能抓取其他网站的内容。
    可以使用php中的
    echo file_get_contents("网址");

    也可以使用curl
    $ch=curl_init();
    curl_setopt($ch,CURLOPT_URL,"网址");
    curl_setopt($ch,CURLOPT_HEADER,0);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    echo $data=curl_exec($ch);
    curl_close($ch);
     

    三、jquery中ajax获取

    用ajax。

    引入jquery的话,

    1
    2
    3
    $( "button" ).click( function (){
        $( "div" ).load( 'test.html' );
    });

    如果你要获取这个页面某个id或者类的html还可以这么写

    1
    2
    3
    $( "button" ).click( function (){
        $( "div" ).load( 'test.html #container' );
    });

     这个可以直接把新页面的html元素加载到指定的div或者别的元素里面。

    如果你要纯代码的话,那再获取这个div的html就可以了。

    1
    $( "div" ).html();

     

     

    四、通过node.js获取

    以前一直听说有爬虫这种东西,稍微看了看资料,貌似不是太复杂。

    正好了解过node.js,那就基于它来个简单的爬虫。

     

    1.本次爬虫目标:

    从拉钩招聘网站中找出“前端开发”这一类岗位的信息,并作相应页面分析,提取出特定的几个部分如岗位名称、岗位薪资、岗位所属公司、岗位发布日期等。并将抓取到的这些信息,展现出来。

     

    初始拉钩网站上界面信息如下:

     

    2.设计方案:

    爬虫,实际上就是通过相应的技术,抓取页面上特定的信息。

    这里主要抓取上图所示岗位列表部分相关的具体岗位信息。

    首先,抓取,就得先有地址url:

    http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=1

    这个链接就是岗位列表的第一页的网页地址。

    我们通过对地址的参数部分进行分析,先不管其他选择的参数,只看最后的参数值:pn=1

    我们的目的是通过page来各个抓取,所以设置为pn = page;

    其次,爬虫要获取特定信息,就需要特定代表的标识符。

    这里采用分析页面代码标签值、class值、id值来考虑。

    通过Firebug对这一小部分审查元素

    分析得出将要获取哪些信息则需要对特定的标识符进行处理。

     

    3.代码编写:

    按照预定的方案,考虑到node.js的使用情况,通过其内置http模块进行页面信息的获取,另外再通过cheerio.js模块对DOM的分析,进而转化为json格式的数据,控制台直接输出或者再次将json数据传送回浏览器端显示出来。

    (cheerio.js这东西的用法很简单,详情可以自行搜索一下。其中最主要的也就下边这份代码了,其余的跟jQuery的用法差不多。

    就是先将页面的数据load进来形成一个特定的数据格式,然后通过类似jq的语法,对数据进行解析处理)

    var cheerio = require('cheerio'),
        $ = cheerio.load('<h2 class="title">Hello world</h2>');
    
    $('h2.title').text('Hello there!');
    $('h2').addClass('welcome');
    
    $.html();
    //=> <h2 class="title welcome">Hello there!</h2>

     

    采用express模块化开发,按要求建立好项目后。进入项目目录,执行npm install安装所需依赖包。如果还不了解express的可以  到这里看看

    爬虫需要cheerio.js 所以另外require进来, 所以要另外  npm install cheerio

    项目文件很多,为了简单处理,就只修改了其中三个文件。(index.ejs  index.js   style.css )

    (1)直接修改routes路由中的index.js文件,这也是最核心的部分。

    还是看代码吧,有足够的注释

     1 var express = require('express');
     2 var router = express.Router();
     3 var http = require('http');
     4 var cheerio = require('cheerio');
     5 
     6 /* GET home page. */
     7 router.get('/', function(req, res, next) {
     8   res.render('index', { title: '简单nodejs爬虫' });
     9   });
    10 router.get('/getJobs', function(req, res, next) { // 浏览器端发来get请求
    11 var page = req.param('page');  //获取get请求中的参数 page
    12 console.log("page: "+page);
    13 var Res = res;  //保存,防止下边的修改
    14 //url 获取信息的页面部分地址
    15 var url = 'http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=';
    16 
    17 http.get(url+page,function(res){  //通过get方法获取对应地址中的页面信息
    18     var chunks = [];
    19     var size = 0;
    20     res.on('data',function(chunk){   //监听事件 传输
    21         chunks.push(chunk);
    22         size += chunk.length;
    23     });
    24     res.on('end',function(){  //数据传输完
    25         var data = Buffer.concat(chunks,size);  
    26         var html = data.toString();
    27     //    console.log(html);
    28         var $ = cheerio.load(html); //cheerio模块开始处理 DOM处理
    29         var jobs = [];
    30 
    31         var jobs_list = $(".hot_pos li");
    32         $(".hot_pos>li").each(function(){   //对页面岗位栏信息进行处理  每个岗位对应一个 li  ,各标识符到页面进行分析得出
    33             var job = {};
    34             job.company = $(this).find(".hot_pos_r div").eq(1).find("a").html(); //公司名
    35             job.period = $(this).find(".hot_pos_r span").eq(1).html(); //阶段
    36             job.scale = $(this).find(".hot_pos_r span").eq(2).html(); //规模
    37 
    38             job.name = $(this).find(".hot_pos_l a").attr("title"); //岗位名
    39             job.src = $(this).find(".hot_pos_l a").attr("href"); //岗位链接
    40             job.city = $(this).find(".hot_pos_l .c9").html(); //岗位所在城市
    41             job.salary = $(this).find(".hot_pos_l span").eq(1).html(); //薪资
    42             job.exp = $(this).find(".hot_pos_l span").eq(2).html(); //岗位所需经验
    43             job.time = $(this).find(".hot_pos_l span").eq(5).html(); //发布时间
    44 
    45             console.log(job.name);  //控制台输出岗位名
    46             jobs.push(job);  
    47         });
    48         Res.json({  //返回json格式数据给浏览器端
    49             jobs:jobs
    50         });
    51     });
    52 });
    53 
    54 });
    55 
    56 module.exports = router;

    (2)node.js抓取的核心代码就是上面的部分了。

    下一步就是将抓取到的数据展示出来,所以需要另一个页面,将views中的index.ejs模板修改一下

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title><%= title %></title>
     5     <link rel='stylesheet' href='/stylesheets/style.css' />
     6   </head>
     7   <body>
     8     <h3>【nodejs爬虫】 获取拉勾网招聘岗位--前端开发</h3>
     9     <p>初始化完成 ...</p>
    10     <p><button class="btn" id="btn0" onclick="cheerFetch(1)">点击开始抓取第一页</button></p>
    11     <div class="container">
    12     <!--<div class="jobs"> </div>-->
    13     </div>
    14     <div class="footer">
    15     <p class="fetching">数据抓取中 ... 请稍后</p>
    16         <button class="btn" id="btn1" onclick="cheerFetch(--currentPage)">抓取上一页</button>
    17         <button class="btn" id="btn2" onclick="cheerFetch(++currentPage)">抓取下一页</button>
    18     </div>
    19     <script type="text/javascript" src="javascripts/jquery.min.js"></script>
    20     <script type="text/javascript">
    21     function getData(str){   //获取到的数据有杂乱..需要把前面部分去掉,只需要data(<em>......<em>  data)
    22         if(str){
    23         return str.slice(str.lastIndexOf(">")+1);
    24     }
    25 }
    26 
    27 document.getElementById("btn1").style.visibility = "hidden";
    28 document.getElementById("btn2").style.visibility = "hidden";
    29 var currentPage = 0;  //page初始0
    30 
    31 function cheerFetch(_page){  //抓取数据处理函数
    32     if(_page == 1){ 
    33         currentPage  = 1;      //开始抓取则更改page
    34     }
    35     $(document).ajaxSend(function(event, xhr, settings) {  //抓取中...
    36         $(".fetching").css("display","block");
    37     });
    38     $(document).ajaxSuccess(function(event, xhr, settings) {  //抓取成功
    39         $(".fetching").css("display","none");
    40     });
    41     $.ajax({   //开始发送ajax请求至路径 /getJobs  进而作页面抓取处理
    42         data:{page:_page},  //参数 page = _page
    43         dataType: "json",
    44         type: "get",
    45         url: "/getJobs",
    46         success: function(data){   //收到返回的json数据
    47             console.log(data);
    48             var html = "";
    49             $(".container").empty();
    50             if(data.jobs.length == 0){ 
    51                 alert("Error2: 未找到数据..");
    52                 return;
    53             }
    54             for(var i=0;i<data.jobs.length;i++){   //遍历数据并提取处理
    55                 var job = data.jobs[i];
    56                 html += "<div class='jobs'><p><span >岗位序号:</span>  "+((i+1)+15*(currentPage-1))+"</p>"+
    57                 "<p>岗位名称:<a href='"+job.src+"'target='_blank'>"+job.name+"</a></p>"+
    58                 "<p><span >岗位所在公司:</span>  "+job.company+"</p>"+
    59                 "<p><span>公司阶段:</span>  "+getData(job.period)+"</p>"+
    60                 "<p><span>岗位规模:</span>  "+getData(job.scale)+"</p>"+
    61                 "<p><span>岗位所在城市:</span>  "+job.city+"</p>"+
    62                 "<p><span>岗位薪资:</span>  "+getData(job.salary)+"</p>"+
    63                 "<p><span>岗位最低经验要求:</span>  "+getData(job.exp)+"</p>"+
    64                 "<p><span>岗位发布时间:</span>  "+getData(job.time)+"</p>"+
    65                 "</div>"
    66             }
    67 
    68             $(".container").append(html);  //展现至页面
    69             if(_page == 1){ 
    70                 document.getElementById("btn1").style.visibility = "hidden";
    71                 document.getElementById("btn2").style.visibility = "visible";
    72             }else if(_page > 1){ 
    73                 document.getElementById("btn1").style.visibility = "visible";
    74                 document.getElementById("btn2").style.visibility = "visible";
    75             }
    76         },
    77         error: function(){ 
    78             alert("Error1: 未找到数据..");
    79         }
    80     });
    81 }
    82 
    83     </script>
    84   </body>
    85 </html>

    (3)当然了,也少不了样式部分的简单修改  public文件下的 style.css

    body {
      padding: 20px 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    a {
      color: #00B7FF;
      cursor: pointer;
    }
    .container{position: relative;width: 1100px;overflow: hidden;zoom:1;}
    .jobs{margin: 30px; float: left;}
    .jobs span{ color: green; font-weight: bold;}
    .btn{cursor: pointer;}
    .fetching{display: none;color: red;}
    .footer{clear: both;}


    基本改动的也就这三个文件了。

    所以,如果要测试一下的话,可以新建项目后,直接修改对应的那三个文件。

    修改成功后,就可以测试一下了。

     

    3.测试结果

    1) 首先在控制台中执行 npm start

    2) 接下来在浏览器输入http://localhost:3000/开始访问

    3) 点击开始抓取(这里每次抓取15条,也就是原网址对应的15条)

    ...

    4) 再抓取下一页也还是可以的~

     

    5) 再来看看控制台的输出

     

     

        看看看看...多简单的小爬虫呀..

        简单归简单,最重要的是,知道了最基本的处理形式。

     

     

     

     

     

     

     

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9267690.html

    展开全文
  • 网站图标.js 获取网站的图标 URL。 如何使用 将代码加载到网页后,您只需使用以下方法之一调用它: window.gF(url); window._gF(url); window.getFavicon(url);
  • 最近做个页面,需要用javascript获取url参数,可发现网上的东西,实在是多了,错误也实在是多啊,真晕,浪费了我不少时间于是,我便总结一下,一个好用的就可以了,先声明下,用正则,是简单,但多浏览器的兼容性,...
  • 方法一、js获取项目根路径的方法 function getRootPath(){ var curPageUrl = [removed].href; var rootPath = curPageUrl.split("//")[0] + curPageUrl.split("//")[1].split("/")[0] + curPageUrl.split("//")...
  • 主要介绍了js获取url页面id,也就是最后的数字文件名,有时候我们需要判断当前页面的id,又不用重新生成页面直接用js获取最后的数字.htm即可
  • //直接通过XMLHttpRequest对象获取远程网页源代码 function getSource() { var url = document.getElementById("url").value; //获取目标地址信息 //地址为空时提示用户输入 if (url == "") { alert("请输入...
  • JavaScript 技术篇-使用js代码获取浏览器窗口标题名,js获取页面URL地址。 用 Google 页面来举例子,Google 是它的窗口标题名,https://www.google.com是它的页面 url 地址。 document.title 可以用来获取窗口标题名...

    Google 页面来举例子,Google 是它的窗口标题名,https://www.google.com是它的页面 url 地址。
    在这里插入图片描述
    document.title 可以用来获取窗口标题名。
    location.href 用来获取它的页面URL地址。
    在这里插入图片描述
    喜欢的点个赞❤吧!

    展开全文
  • 在用iframe的时候都会做分页操作 iframe内部的url跳转将不能直接通过iframe的src属性来获得,下面与大家分享下iframe的当前url获取方法
  • 获取url上的某个参数的方法有很多,在本文为大家介绍下使用javascript是如何实现的,感兴趣的朋友不要错过
  • 前端获取url链接参数

    2018-12-21 08:38:27
    js获取链接中所带参数,根据参数key值获取,最新方法,测试可用
  • 今天碰到要在一个页面获取另外一个页面url传过来的参数,一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下,肯定会有更加简单的方法的!所以在网上找到了几个很又简单实用的方法,mark...
  • iOS 通过url获取网页文字内容

    千次阅读 2018-04-02 16:46:53
    今天突然有一个需求, 第二个页面要显示...这里就不详细说怎么拿到title或者图片之类的了,我的需求是拿到文章内容的文字部分拿来显示三排就够了:①拿到网页内容,很简单一句代码NSString *htmlString = [NSString str...

        今天突然有一个需求, 第二个页面要显示一个网页,第一个页面要显示图片标题或者简介等内容,但是!后台仅仅返回了一个URL!这就意味着我必须在第一个页面自己通过URL拿到网页内部我需要的内容.这里就不详细说怎么拿到title或者图片之类的了,我的需求是拿到文章内容的文字部分拿来显示三排就够了:

    ①拿到网页内容,很简单一句代码

    NSString *htmlString = [NSString stringWithContentsOfURL:[NSURL URLWithString:@"你的完整URL"] encoding:NSUTF8StringEncoding error:nil];

    ②正则去除网络标签,一个方法

    - (NSString *)getZZwithString:(NSString *)string{
        NSRegularExpression *regularExpretion=[NSRegularExpression regularExpressionWithPattern:@"<[^>]*>|\n" options:0 error:nil];
        string = [regularExpretion stringByReplacingMatchesInString:string options:NSMatchingReportProgress range:NSMakeRange(0, string.length) withTemplate:@""];
        return string;
    }

    ③最后 

    NSString *contentStr = [self getZZwithString:htmlString];

    contentStr就是我要用于显示的文本了.此方法拿到的文本是url对应网页的文本,所以根据需求自由截取长短.

    总结:以上主要是在不需要加载网页的情况下使用的,方便快捷.如果本页面本来就有webView,那就可以通过js代码来获取相应的内容:

    - (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    UIWebView *web = webView;
    
    //获取所有的html
    
    NSString *allHtml = @"document.documentElement.innerHTML";
    
    //获取网页title
    
    NSString *htmlTitle = @"document.title";
    
    //获取网页的一个值
    
    NSString *htmlNum = @"document.getElementById('title').innerText";
    
    //获取到得网页内容
    
    NSString *allHtmlInfo = [web stringByEvaluatingJavaScriptFromString:allHtml];
    
    NSLog(@"%@",allHtmlInfo);
    
    NSString *titleHtmlInfo = [web stringByEvaluatingJavaScriptFromString:htmlTitle];
    
    NSLog(@"%@",titleHtmlInfo);
    
    NSString *numHtmlInfo = [web stringByEvaluatingJavaScriptFromString:htmlNum];
    
    NSLog(@"%@",numHtmlInfo);
    
    }
    
    此处引用流浪在简书的文章


    展开全文
  • 主要介绍了JS实现获取当前URL和来源URL的方法,涉及javascript针对页面document属性操作的相关技巧,需要的朋友可以参考下
  • js获取url链接字符串:location.href 可以对其进行截取,从而获取传送的参数,常用如下: location.href.indexOf(“?”)——获取?的index值。 注意:这里的location.href可不是指的现在地址栏里的地址,而是页面...
  • js地址栏参数获取,并生成对象
  • 主要介绍了使用vue-router切换页面时,获取上一页url以及当前页面url的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • JavaScript获取URL汇总

    2020-12-03 18:43:56
    URL即统一资源定位符 (Uniform Resource Locator, URL),完整的URL由这几个部分构成: scheme://host:port/path?query#fragment scheme:通信协议,常用的http,ftp,maito等。 host:主机,服务器(计算机)域名系统 ...
  • #localhost //获取网页地址 echo $_SERVER[‘PHP_SELF’].” ”; #/blog/testurl.php //获取网址参数 echo $_SERVER[“QUERY_STRING”].” ”; #id=5 //获取用户代理 echo $_SERVER[‘HTTP_REFERER’].” ...
  • JS 获取当前页面URL

    2019-04-23 01:54:34
    NULL 博文链接:https://onestopweb.iteye.com/blog/2292540
  • js获取url传值的方法

    2021-01-19 15:10:38
    静态html文件js读取url参数 根据获取html的参数值控制html页面输出 一、字符串分割分析法 这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: ...
  • node.js通过url读取文件

    2020-12-16 20:47:29
    本文实例为大家分享了node.js通过url读取文件的具体代码,供大家参考,具体内容如下 在浏览器地址栏中输入127.0.0.1:3000和127.0.0.1:3000/node时,读取node.html文件,输入127.0.0.1:3000/banner时读取banner.json...
  • JS获取当前页面URL参数

    万次阅读 2018-11-13 14:31:45
    1.首先需要获取当前页面URL,这个可以从 window.location.search 获取: //获取当前页面的完整地址 var currentUrl = window.location.href; //获取当前页面URL的从问号 (?) 开始的 URL(查询部分) var params = ...

    1.首先需要获取当前页面的URL,这个可以从 window.location.search 获取:

    //获取当前页面的完整地址
    var currentUrl = window.location.href;
    //获取当前页面URL的从问号 (?) 开始的 URL(查询部分)
    var params = window.location.search;
    

     

    Location 对象属性

    属性描述
    hash设置或返回从井号 (#) 开始的 URL(锚)。
    host设置或返回主机名和当前 URL 的端口号。
    hostname设置或返回当前 URL 的主机名。
    href设置或返回完整的 URL。
    pathname设置或返回当前 URL 的路径部分。
    port设置或返回当前 URL 的端口号。
    protocol设置或返回当前 URL 的协议。
    search设置或返回从问号 (?) 开始的 URL(查询部分)。

    上表来自 http://www.w3school.com.cn/jsref/dom_obj_location.asp 

    2.获取具体的参数

    以Google "JS获取当前页面url参数" 的URL为例:

    https://www.google.com/search?ei=XEDqW-fuAoXN0PEPytmR-As&q=JS%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2url%E5%8F%82%E6%95%B0&oq=JS%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2url%E5%8F%82%E6%95%B0&gs_l=psy-ab.3...3192.3424.0.3909.3.3.0.0.0.0.280.280.2-1.1.0....0...1c.1j4.64.psy-ab..2.0.0....0.Bf-4Zsck6OI

    以下内容转载自: https://blog.csdn.net/tjcyjd/article/details/44275531

    但unescape函数替换为了decodeURLcomponent

    有两种方法:

    (1)split 分割放进对象:

    function GetRequest() { 
    	var url = location.search; //获取url中"?"符后的字串 
    	var theRequest = new Object(); 
    	if (url.indexOf("?") != -1) {
    		var str = url.substr(1); 
    		strs = str.split("&"); 
    		for(var i = 0; i < strs.length; i ++) {
    			theRequest[strs[i].split("=")[0]]=decodeURLcomponent(strs[i].split("=")[1]); 
    		} 
    	} 
    	return theRequest; 
    } 
     
    var req = GetRequest(); 
     
    var query = req['q'];
     
    alert(query);
    

    (2)正则表达式匹配:

    function getQueryString(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return decodeURLcomponent(r[2]); return null;
    }
     
    var query= getQueryString("q");
     
    alert(query);
    

    注:

    1.window.location.search中包含中文参数时,使用unescape进行解码会出现乱码错误,应该使用 decodeURLComponent函数;

    关于 escape encodeURI encodeURIComponent 的区别,请参考:

    https://www.cnblogs.com/qiantuwuliang/archive/2009/07/19/1526687.html

    主要区别是:

    1..escapte unescapte 已经被废弃;

    2.encodeURI/decodeURI 用于编码/解码整个URL, encodeURIComponent/decodeURIComponent 用于编码/解码URL的部分参数;

    展开全文
  • 主要介绍了js实现ifram取父窗口URL地址的方法,是javascript操作window.parent对象非常典型的应用技巧,需要的朋友可以参考下
  • js获取页面URL地址

    2019-12-18 17:48:42
    在WEB开发中,时常会用到javascript获取当前页面url网址信息,本文就简要聊一聊如何用JS取当前网页url信息。  URL即:统一资源定位符 (Uniform Resource Locator, URL)  完整的URL由这几个部分构成:  ...
  • 主要介绍了node.js正则表达式获取网页中所有链接的代码实例,使用正则表达式实现,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 357,603
精华内容 143,041
关键字:

js根据url获取页面内容