我目前正在开发一个简单的Google chrome扩展程序，以便在基于omnibox query的单独标签中播放youtube视频。例如，如果用户搜索“tupac”，我的扩展程序将重定向到chrome-extension:// {chrome-extension-id} /just-play-music.html?tupac。
现在，我想在这个just-play-music.html页面上嵌入一个youtube iframe播放器，设置为播放通过搜索字符串“tupac”返回的视频列表。遵循Google API文档，通过为我的iframe提供以下src网址即可轻松实现此目标:http://www.youtube.com/embed?listType=search&list=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();
}
最佳答案
您应该在console.log上执行location.search。它为您提供了您需要解析的字符串，例如"?key=value&key2=value2&etc=another+value"。我认为您可能需要解决这个问题。
因此，如果说list=只需是tupac，则需要执行以下操作将搜索字符串从看起来像?query=tupac的字符串转换为看起来像tupac的字符串:
var query = location.search.split('=')[1];
它的作用是将字符串分成两部分，使用
=符号将其分割，然后使用[1]选择第二部分(数组索引从0开始)。然后，您将只有字符串的tupac部分(或任何查询字符串用于[例如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];
});