如何从内部函数分配的html页面获取值

时间:2016-12-19 07:57:38

标签: javascript html google-chrome-extension

我希望得到艺术家和广播中播放歌曲的标题作为镀铬扩展。我们可以用这个链接作为例子; http://www.radiogrenouille.com/

到目前为止我做了什么?我发一个http请求并获取html。并尝试解析歌曲信息。

popup.js

<ul class="chlk-timeline-years" id="chlk-timeline-decades">
  <li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
    <ul>
      <li></li>
    </ul>
  </li>
  <li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

  <li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
    <ul>
      <li></li>
    </ul>
  </li>

  <li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

</ul>

但是function httpGet(theUrl, callback) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { callback(xmlhttp.responseText); } } xmlhttp.open("GET", theUrl, true ); xmlhttp.send(); } window.onload = function() { httpGet("http://www.radiogrenouille.com/",function(result) { var el = document.createElement('html'); el.innerHTML = result; console.log(el.querySelectorAll(".titreencours")[0].innerText); }); } 返回空字符串。我该怎么办?这是因为它的值是由网站中的el.querySelectorAll(".titreencours")[0].innerText设置的吗?那么我该如何获取信息?

的manifest.json

titresplayer

3 个答案:

答案 0 :(得分:1)

你做得很好,你的代码逻辑是正确的。但是你应该知道页面内容是由Javascipt生成的。

您从ajax请求中获得的只是服务器呈现的内容。

如果按Ctrl + U查看页面来源,您将看到空标记<span class="titreencours"></span>。这就是为什么你得到空字符串而不是标题。其他标签也是空的。

            <div id="titreEnCours">
              <div class="contenutitreEnCours">
                <p><span class="titreencours"></span></p>
                <p><span class="artistetitreencours"><strong></strong> </span></p>
                <p class="albumencours"><span class="nom"></span> <span class="labelencours"></span></p>
                <p class="radioencours"></p>
              </div>
              <span></span>
            </div>

有关您的信息,该页面会加载播放列表 http://www.radiogrenouille.com/wp-content/themes/radiogrenouille-new/cestpasse.php

干杯。

答案 1 :(得分:0)

问题是您正在尝试执行跨域请求,并且您要连接的服务器不允许它(Access-Control-Allow-Origin未设置响应)... 解决方法可以是从服务器端代码(如PHP curl)发出请求,并向服务器端文件发出ajax请求(例如myAjax.php)

答案 2 :(得分:-1)

您是否检查过您是否在“结果”中收到了回复页面,就好像您是从不同的来源尝试一样,那么您可能会得到200 OK且空回复。