gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:33:09 24 4
gpt4 key购买 nike

我目前正在开发一个简单的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];
});

关于javascript - 设置iframe的src属性,然后使用javascript加载到页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18222060/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com