使用调用 rss 提要的脚本动态构建 iframe答案

【问题标题】：dynamically build iframe with script that calls rss feed使用调用 rss 提要的脚本动态构建 iframe
【发布时间】：2011-11-16 21:59:49
【问题描述】：

我正在做一个项目，我正在构建一个 iframe 并用 html 代码填充它以显示 rss 提要。下面的代码显示了我是如何做到这一点的。它在 Firefox 中运行良好，但是当我在 Internet Explorer 中运行该功能时，它不会加载 rss 提要。有什么想法吗？

JavaScript 函数

 function AddIframe()
    {           
        ifrm = document.createElement("iframe");
        ifrm.setAttribute("name", "iFrame1");
        ifrm.setAttribute("id","iFrame1");
        document.body.appendChild(ifrm);
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument; 
        ifrm.document.open(); 
        ifrm.document.write("<html><head><title>testIframe</title></head><body><div> <script language='JavaScript' src='http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fwww.nfl.com%2Frss%2Frsslanding%3FsearchString%3Dhome&chan=n&num=20&desc=1&date=y&targ=y' type='text/javascript'>" + String.fromCharCode(60).toString() + "/script> </div></body></html>");     
        ifrm.document.close();                  
    }

HTML

 <div>
      <input type="button" value="Click Here" onclick="AddIframe();" />
 </div>

【问题讨论】：

stackoverflow.com/questions/4614850/…

标签： javascript iframe build rss

【解决方案1】：

你为什么不使用 jQuery 和 .append() 函数并有一个单独的页面来提升？

例如。 $(this).append('');

【讨论】：

【解决方案2】：

编辑：在查看了您的 JavaScript 之后，我发现我最初的观察是一条红鲱鱼（尽管它对我来说仍然很麻烦）。我尽量避免document.write()。一些更好的选择：

将元素附加到 DOM 而不是 document.write()。
更好的是，与其输出从php输出html的javascript，不如直接从php输出html，并将iframe src直接设置为你的php页面。

原答案：

这些行看起来很可疑：

ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;  
ifrm.document.open();

仅当ifrm.contentWindow 存在时，以下行才会起作用。查看第二个条件，我们知道如果失败，则没有 ifrm.contentDocument.document 并且以下行将不起作用。如果第二个条件通过，则似乎不太可能存在 ifrm.contentDocument.document.document 属性。

顺便说一句，双三元表达式可以更简洁：

ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;

然而，由于上述问题，这一点没有实际意义。

【讨论】：

【解决方案3】：

好吧，我想通了，当写入 iframe 时，Internet Explorer 对语法比 firefox 更挑剔，所以我不得不使用一些转义来让它工作。我也更改了代码，所以现在它接受一个 rss URL 并在按钮单击时添加它。请看下面的代码。

JavaScript

 function AddIframe(url)
    {
        try{
        var SelectedFeed = url;             
        var semiUrl = "src=" + replaceSpecial(SelectedFeed); + "&chan=n&num=20&desc=1&date=y&targ=y";
        var source = 'src=\"http://itde.vccs.edu/rss2js/feed2js.php?' + semiUrl + '\"';  

        var htmlWriter = "<html><head><title>testIframe</title><link rel='stylesheet' href='gadget.css' /></head><body><div>" + '<scr'+'ipt type=\"text/javascript\" ' + source +'></scr'+'ipt>' + "</div></body></html>"                       

        ifrm = document.createElement("iframe");
        ifrm.setAttribute("name", "iFrame1");
        ifrm.setAttribute("id","iFrame1");
        document.getElementById("div1").appendChild(ifrm);
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.      contentDocument; 
        ifrm.document.open(); 
        ifrm.document.write(htmlWriter);
        ifrm.document.close();  

        }
        catch(e)
        {
            alert(e);
        }

    }

 function replaceSpecial(Text)
    {
        try{        
            var r1 = Text;
            r1 = r1.replace(/ /g,"%20");
            r1 = r1.replace(/@/g,"%40");
            r1 = r1.replace(/#/g,"%23");
            r1 = r1.replace(/\$/g,"%24");               
            r1 = r1.replace(/\%/g,"%25");
            r1 = r1.replace(/&/g,"%26");
            r1 = r1.replace(/=/g,"%3D");
            r1 = r1.replace(/\+/g,"%2B");
            r1 = r1.replace(/:/g,"%3A");
            r1 = r1.replace(/;/g,"%3B");                
            r1 = r1.replace(/"/g,"%22");                
            r1 = r1.replace(/\\/g,"%5C");
            r1 = r1.replace(/\//g,"%2F");
            r1 = r1.replace(/\?/g,"%3F");
            r1 = r1.replace(/</g,"%3C");
            r1 = r1.replace(/>/g,"%3E");
            r1 = r1.replace(/\[/g,"%5B");
            r1 = r1.replace(/]/g,"%5D");
            r1 = r1.replace(/{/g,"%7B");
            r1 = r1.replace(/}/g,"%7D");
            r1 = r1.replace(/`/g,"%60");                

            Text = r1;

            return Text;                    
        }
        catch(e)
        {
            alert(e);
        }

    }

HTML

  <input type="button" value="Add Sports" onclick="AddIframe('http://www.nfl.com/rss/rsslanding?searchString=home');" />
  <input type="button" value="Add News" onclick="AddIframe('http://msn.com/rss/news.aspx');" />

【讨论】：