仕事の目的でブックマークレットを作成しているときに遭遇した奇妙な設定に少し問題があります。ページ上のすべてのビデオ埋め込みを検索し、その情報を処理して、ギャラリー設定に挿入するJSONコードを生成できるようにする必要があります。問題は、データの処理に必要な情報を確実に取得できないことです。
まず、適切なitempropを使用してページ上のすべてのdivを見つけます
items = $('div[itemprop=video]');
次に、$。each（）を使用して処理を開始します
thumbnail = getThumb($(this).find('*[itemprop=thumbnailUrl]'));
filename = getFilename($(this).find('*[itemprop=contentUrl]'));
filelocation = getFilelocation( $(this).find('*[itemprop=contentUrl]'));
処理のためにthumbnailURLとcontentURLを取得できる必要があります。
function getFilename(gfn) {
if(gfn.prop('tagName') == 'META') {
gfname = gfn.prop('content');
} else {
gfname = gfn.attr('href');
}
x = gfname.lastIndexOf('/');
gfname = gfname.substr(x+1);
y = gfname.lastIndexOf('.');
gfname = gfname.substr(0,y);
return gfname;
}
.prop('tagName')がメタタグに含まれていないundefined場合でも返され続けます。このブックマークレットを実行する方法について誰かアイデアがありますか？itemprops
ブックマークレットとソースコードはこちらから入手できます
編集：言及されたので、先に進んで、余分なgifを取り除いたブックマークレットコードをここにダンプします
<a href="javascript:(function(){
var jQueryIsReady = function(){
if($('#vid2json_container').length < 1)
{
container = $(document.createElement('div'));
container.attr('id','vid2json_container');
container.css('position','fixed');
container.css('top','0');
container.css('left','0');
container.css('background-color','#222222');
container.css('padding','2px');
container.css('border-style','solid');
container.css('border-width','1px');
container.css('border-color','#000000');
container.css('opacity','0.95');
container.css('z-index','999997');
container.css('width','500px');
container.css('height',window.innerHeight);
container.css('overflow-y','auto');
container.css('overflow-x','hidden');
container.hide();
divider_01 = $(document.createElement('div'));
divider_01.css('clear','both');
logo = $(document.createElement('img'));
logo.attr('src','http://www.cityofdev.com/apps/bookmarklet/vid2json.png');
logo.css('float','left');
close_button = $(document.createElement('img'));
close_button.attr('src','http://www.cityofdev.com/apps/bookmarklet/close_button.jpg');
close_button.css('float','right');
close_button.bind('click',function(){
$('#vid2json_container').hide(500,function(){
$(this).remove();
});
});
output = $(document.createElement('div'));
output.attr('id','vid2json_output');
output.css('color','#ffffff');
container.append(logo);
container.append(close_button);
container.append(divider_01);
container.append(output);
$('body').prepend(container.show(500));
}
destination = $('#vid2json_output');
destination.html('');
items = $('div[itemprop=video]');
output = $(document.createElement('div'));
output.css('display','block');
output.css('padding','0 0 10px');
if(items.length > 0)
{
$.each(items,function(index,el){
title = $(this).find('*[itemprop=name]').attr('content');
thumbnail = getThumb($(this).find('*[itemprop=thumbnailUrl]'));
filename = getFilename($(this).find('*[itemprop=contentUrl]'));
filelocation = getFilelocation($(this).find('*[itemprop=contentUrl]'));
description = $(this).find('*[itemprop=description]').attr('content');
city = getCity();
citylink = getCitylink();
category = getCategory();
categorylink = getCategorylink();
duration = $(this).find('*[itemprop=duration]').attr('content');
head = $(document.createElement('span'));
head.html(title+' -> JSON<br />\n');
head.css('display','block');
head.css('font-weight','700');
head.css('font-size','12px');
textarea = $(document.createElement('textarea'));
textarea.css('width','100%');
textarea.css('height','300px');
textarea.css('margin','0 0 20px');
vCode = '';
vCode += ' {\n';
vCode += ' "title": "'+title+'",\n';
vCode += ' "thumbnail": "'+thumbnail+'",\n';
vCode += ' "filename": "'+filename+'",\n';
vCode += ' "filelocation": "'+filelocation+'",\n';
vCode += ' "description": "'+description+'",\n';
vCode += ' "city": "'+city+'",\n';
vCode += ' "citylink": "'+citylink+'",\n';
vCode += ' "category": "'+category+'",\n';
vCode += ' "categorylink": "'+categorylink+'",\n';
vCode += ' "duration": "'+duration+'",\n';
vCode += ' "height": "",\n';
vCode += ' "width": ""\n';
vCode += ' }\n';
textarea.val(vCode);
output.append(head);
output.append(textarea);
destination.append(output);
});
}else{
output.html('No Items Found');
destination.html(output);
}
scrollToTop = $(document.createElement('div'));
scrollToTop.html('Scroll To Top');
scrollToTop.css('cursor','pointer');
scrollToTop.bind('click',function(){
$('#vid2json_container').animate({ scrollTop: 0 },1000);
});
footer = $(document.createElement('div'));
footer.css('font-size','9px');
footer.css('color','#555555');
footer.css('padding','5px 0');
footer.html('VID2JSON bookmarklet programmed by David A Perez');
destination.append(scrollToTop);
destination.append(footer);
};
var checkJquery = function(){
if(typeof jQuery == 'undefined')
{
script01 = document.createElement('SCRIPT');
script01.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
script01.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script01);
}else{
clearTimeout(interval);
jQueryIsReady();
}
};
var interval = setInterval(checkJquery,100);
function getCategorylink()
{
catl = location.href;
return catl;
}
function getCategory()
{
cat = $('.cat-header, .category-header').find('span, h1').html();
return cat.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getCitylink()
{
cl = location.href;
x = cl.indexOf('/',8);
return cl.substr(0,x);
}
function getCity()
{
c = $('title').html();
x = c.lastIndexOf('-');
c = c.substr(x+1);
y = c.lastIndexOf(',');
c = c.substr(0,y);
return c.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getFilelocation(gfl)
{
if(gfl.is('meta'))
{
gflocation = gfl.prop('content');
}else{
gflocation = gfl.attr('href');
}
x = gflocation.lastIndexOf('/');
gflocation = gflocation.replace(/www/gi,'ww');
gflocation = gflocation.substr(0,x+1);
gflocation = gflocation.replace(/[^\/]{1,}$/,'');
return gflocation.replace(/[\/]{2,}$/,'\/');
}
function getFilename(gfn)
{
if(gfn.is('meta'))
{
gfname = gfn.prop('content');
}else{
gfname = gfn.attr('href');
}
x = gfname.lastIndexOf('/');
gfname = gfname.substr(x+1);
y = gfname.lastIndexOf('.');
gfname = gfname.substr(0,y);
return gfname;
}
function getThumb(gt)
{
alert(gt.is('meta'));
if(gt.is('meta'))
{
gtname = gt.prop('content');
}else{
gtname = gt.attr('src');
}
num = gtname.lastIndexOf('/');
return gtname.substr(num+1);
}
})();">vid2json</a>
これはブックマークレットとして実行されることになっているので、サイトのどのページでも使用できます。Webページがロードされ、jQueryがロードされた後、手動で実行され、準備ができたら処理を開始します。問題を引き起こしていると思われる部分は
$(this).find('*itemprop=ITEMPROP');
itempropsがメタタグにある場合は正常に機能しますが、
<td class="ad" colspan="2" bgcolor="#000000" style="border:solid #CCCCCC 1px;">
<div itemscope itemtype="http://schema.org/LocalBusiness" style="color:#222222; font-weight: bold; text-align: center; width:580px;">
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="P.C.C.S. Dryer Vent Cleaning" />
<meta itemprop="duration" content="T1M20S" />
<meta itemprop="description" content="Fort Worth, TX dryer vent cleaning service." />
<meta itemprop="height" content="580" />
<meta itemprop="width" content="326" />
<a href="http://204.145.110.12/thecityoffortworth.com/videos/pccs-dryer-vent-cleaning.mp4" itemprop="contentURL" style="display:block;width:580px; height:326px; border:0px; margin-bottom:104px;" id="pccs">
<img src="pccs-dryer-vent-cleaning.png" alt="P.C.C.S. Dryer Vent Cleaning" width="580" height="430" border="0" itemprop="thumbnailURL" />
</a>
</div>
<a href="http://www.fortworthsweep.com" class="style5" target="_blank" rel="nofollow" itemprop="url" style="color:#ffffff">www.fortworthsweep.com</a>
</div>
0アイテムを返します。.find（'meta [itemprop = contentURL]、a [itemprop = contentURL]'）を試しましたが、0個のアイテムも返されます。ホールドアップは本当にタグのように見えます、何かアイデアはありますか？
また、何か間違ったことをしている場合はお詫びします。Stackoverflowに投稿するのはこれが初めてで、ほとんどJavascriptとjQueryを独学で学んでいます。私は何が可能で、何ができるかを学ぶために最善を尽くしています。ご理解とご協力をよろしくお願いいたします。