2

我有一些 HTML 代码要传递给一个函数，该函数不是要查找所有 iframe，用图像替换 iframe 代码，然后返回修改后的 html。但是，它似乎并没有替换返回的 html 中的 iframe 代码。我很确定我只是错误地引用了 hte 替换，但在网上找不到任何类似于我试图做的例子。它们都参考搜索整个文档或在文档中显示 html 之后。此 HTML 不是也不能是由于应用程序要求。

请注意：我已经生成了 youtube 代码来替换 iframe 代码。问题在于执行替换。

function article_youtube_convert(html) {
    //go throught the iframes for youtube and convert them to embed

    $(html).find('iframe').each(function(i) {
                     alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           url_parts = src_youtube.split('/');

           youtube_id = url_parts[url_parts.length-1];

           url_parts = youtube_id.split('?');
           youtube_id = url_parts[0];

           youtube_link = 'http://www.youtube.com/watch?v='+youtube_id;
           img_youtube = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';

            $(this).replaceWith(img_youtube);


                     //alert(document.getElementById('tempvid').innerHTML);  
        }
    });
    return html;


}

更新

我决定尝试使用 outerHTML 方法，并用变量中的新替换文本替换文本，如下所示。我提醒完整来源没有问题，但它仍然不能取代它。

jQuery.fn.outerHTML = function(s) {
    return s
    ? this.before(s).remove()
    : jQuery("<p>").append(this.eq(0).clone()).html();
};


function article_youtube_convert(passed) {
    //go throught the iframes for youtube and convert them to embed
    //alert('inside');
    newhtml = passed;
    //alert(newhtml);
    $(newhtml).find('iframe').each(function(i) {
                     //alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           url_parts = src_youtube.split('/');
                                   alert('youtube vid');
           youtube_id = url_parts[url_parts.length-1];

           url_parts = youtube_id.split('?');
           youtube_id = url_parts[0];

           youtube_link = 'http://www.youtube.com/watch?v='+youtube_id;
           img_youtube = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';
                                   alert('alert: '+$(this).outerHTML());
                                   sourcethe = $(this).outerHTML();
                                   passed.replace(sourcethe,img_youtube);
            //$(this).replaceWith(img_youtube);
                                   //alert($(this));


                     //alert(document.getElementById('tempvid').innerHTML);  
        }
    });
    alert(passed);
    return passed;


}
4

3 回答 3

1

大卫，我刚刚做了一个快速测试，用三个iframe元素编写了一个简单的 HTML 页面，并复制了你的代码。我将 iframe 包装在一个<div id="test">元素中并调用article_youtube_convert ("div#test");. iframe 被完美地替换了。

<div id="test">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
</div>

您确定将正确的 html 上下文传递给article_youtube_convert函数吗？

于 2012-04-25T13:03:18.863 回答
1

看起来你实际上并没有从那个函数返回你想要的东西......

你从来没有真正改变html你的方法，你只是用它来做一些被丢弃的东西，然后返回你输入的东西。

你最有可能想做的是

var jqHtml = $(html);
...Do stuff to modify jqHtml...
return jqHtml.html();

我不确定且尚未测试的一件事是 .html() 是否返回您想要的。文档说它使用 elementsinnerHTML属性，但我不确定这是否会给从字符串构造的 jquery 对象提供正确的东西（我认为它应该）。

无论如何，这是您的基本问题，您根本没有修改 html。$(html)正在获取html字符串的副本，而不是对其可以根据需要进行更新的引用。

于 2012-04-25T13:32:59.013 回答
0

我想你想要

  url_parts = youtube_id.split('?');
  youtube_id = url_parts.pop();

但请注意，youtube_id将包括v=，所以你可以这样做：url_parts.pop().substring(2)

于 2012-04-25T11:40:12.617 回答