установить атрибут src iframe, затем загрузить на страницу, используя javascript

В настоящее время я работаю над простым расширением google chrome, чтобы воспроизводить видео YouTube в отдельной вкладке на основе omnibox query. Например, если пользователь выполняет поиск «tupac», мое расширение перенаправляется на chrome-extension: // {chrome-extension-id} /just-play-music.html?tupac.установить атрибут src iframe, затем загрузить на страницу, используя javascript

Теперь я хочу вставить проигрыватель iframe youtube на этой странице только play-music.html, чтобы воспроизвести список видео, возвращенных поиском в строке «tupac». Следуя документам API Google API, это достигается достаточно легко, предоставляя следующий URL-адрес src для моего iframe: http://www.youtube.com/embed?listType=search&list=QUERY, где QUERY в этом случае будет заменен на «tupac».

Однако здесь я достиг точки прилипания. Я не могу понять, как настроить мои .html и .js-файлы, чтобы это происходило динамически при загрузке страницы на основе URL-адреса страницы. Ниже приведен код для just-play-music.html и файла .js, с которым он связан.

Опять же, целью здесь является генерация iframe iframe с атрибутом src, созданным захватом 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(); 
}

источник

2013-08-14 zian

Вы должны сделать console.log на location.search. Он дает вам строку, которую вам нужно разобрать, например, "?key=value&key2=value2&etc=another+value". Я думаю, вам, возможно, придется обратиться к этому.

Так что, если где он говорит list= потребности быть просто tupac, вы будете нуждаться, чтобы преобразовать строку поиска из строки, выглядит следующим образом: ?query=tupac в строку, которая выглядит как этот tupac делать что-то вроде:

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

Что это делает она разбивает строку на две части, используя = знак, чтобы разделить их, а затем с помощью [1], чтобы выбрать вторую часть (индексы массива начинаются с 0). Тогда у вас будет только часть строки (или любая строка запроса для [например, 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-14 02:16:24 tjb1982

установить атрибут src iframe, затем загрузить на страницу, используя javascript

ответ

Смежные вопросы