0

我目前正在开发一个简单的 google chrome 扩展程序，以根据多功能框查询在单独的选项卡中播放 youtube 视频。例如，如果用户搜索“tupac”，我的扩展程序将重定向到 chrome-extension://{chrome-extension-id}/just-play-music.html?tupac。

现在我想在这个 just-play-music.html 页面上嵌入一个 youtube iframe 播放器，设置为播放通过搜索字符串“tupac”返回的视频列表。按照 Google API 文档，这很容易通过为我的 iframe 提供以下 src url 来实现：http ://www.youtube.com/embed?listType=search&list= QUERY 在这种情况下，QUERY 将被替换为“tupac” .

但是，这里是我遇到的症结所在。我不知道如何配置我的 .html 和 .js 文件，以便在页面加载时根据页面的 url 动态发生这种情况。下面是 just-play-music.html 的代码和它所链接的 .js 文件。

同样，这里的目标是在页面加载时生成一个带有 src 属性的 youtube iframe，该属性通过抓取 location.search（我意识到这是一种不优雅的方式）创建，然后将此 iframe 插入到内容部分。如果您发现一些非常错误的地方，请告诉我，这无疑是我第一次使用 javascript。

html

<html>
<head>
  <link rel="stylesheet" href="main.css" type="text/css">
  <script src="main.js"></script>
</head>

<body>
  <section class="header">
    <h1>just play music:</h1>
  </section>

  <section id="movie" class="content">
  </section>
</body>
</html>

javascript

function iframeDidLoad() {
alert("Done");
}

function loadIframe() {
    var query = location.search;
    var target = "http://www.youtube.com/embed?listType=search&autoplay=1&list=" +         encodeURIComponent(query);
    var frame = '<iframe id="ytplayer" type="text/html" width="640" height="390"    src="'+target+'" frameborder="0" />';
    document.getElementById('movie').innerHTML = frame;
    iframeDidLoad();
}
4

1 回答 1

0

你应该console.log在location.search. 它为您提供了一个需要解析的字符串，例如"?key=value&key2=value2&etc=another+value". 我想你可能需要解决这个问题。

因此，如果它说的位置list=需要 just tupac，您将需要通过执行以下操作将搜索字符串从看起来像这样的字符串转换为看起来像这样?query=tupac的字符串tupac：

var query = location.search.split('=')[1];

这样做是将字符串分成两部分，使用=符号将它们分开，然后使用[1]选择第二部分（数组索引从 0 开始）。然后，您将获得tupac字符串的一部分（或任何用于 [eg, U2] 的查询字符串）。

如果您的查询字符串有多个参数，您需要先解析每个参数，例如，如果您的查询字符串如下所示：

?somekey=somevalue&query=tupac&someotherkey=some+other+value

您将需要执行以下操作：

var query;
location.search.split('&').forEach(function(piece) {
    if (piece.indexOf('query=') !== -1)
        query = piece.split('=')[1];
});
于 2013-08-14T02:16:24.293 回答