设置iframe的src属性，然后使用javascript加载到页面中

我目前正在开发一个简单的GoogleChrome扩展，它可以在一个单独的标签中基于一个浏览器播放youtube视频。例如，如果用户搜索“tupac”，我的扩展将重定向到chrome扩展：//{chrome extension id}/just play music.html？tupac

现在我想在just-play-music.html页面上嵌入一个youtube iframe播放器，设置为播放搜索字符串“tupac”返回的视频列表。遵循GoogleAPI文档，通过为我的iframe提供以下src url，可以很容易地实现这一点：在本例中，where查询将替换为“tupac”

然而，我已经到了一个关键点。我不知道如何配置我的.html和.js文件，以便在页面加载时根据页面的url动态地执行此操作。下面是just-play-music.html及其链接的.js文件的代码

同样，这里的目标是在页面加载时生成一个带有src属性的youtube iframe，该属性是通过抓取location.search创建的（我知道这是一种不雅观的方式），然后将该iframe插入到内容部分。请让我知道如果你看到一些非常错误的东西，这是我第一次使用javascript

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();
}

函数iframeDidLoad（）{
警惕（“完成”）；
}
函数loadIframe（）{
var query=location.search；
变量目标=”http://www.youtube.com/embed?listType=search&autoplay=1&list=“+组件（查询）；
var frame=''；
document.getElementById（'movie'）.innerHTML=frame；
iframeDidLoad（）；
}

您应该在

位置执行
控制台。记录
。搜索
。它为您提供了一个需要解析的字符串，例如，
“？key=value&key2=value2&etc=other+value”
。我想你可能需要解决这个问题

因此，如果说
list=
的地方需要是
tupac
，那么您需要通过如下操作将搜索字符串从如下所示的字符串转换为如下所示的字符串：
？query=tupac
：

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

它将字符串拆分为两段，使用
=
符号将其拆分，然后使用
[1]
选择第二段（数组索引从0开始）。然后您只需要字符串的
tupac
部分（或者查询字符串的任何内容[例如，
U2
]）

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

var query;
location.search.split('&').forEach(function(piece) {
    if (piece.indexOf('query=') !== -1)
        query = piece.split('=')[1];
});

？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];
});