dynamically build iframe with script that calls rss feed

Question

I am working on a project where I am building an iframe and filling it with html code to display an rss feed. The code below shows how I am accomplishing this. It works fine in firefox but when I run the function in internet explorer it doesn't load the rss feed. any ideas?

JavaScript Function

 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>

http://stackoverflow.com/questions/4614850/jquery-add-iframe-with-content — Jaider, Feb 12 '13 at 21:50

gilly3 · Answer 1 · 2011-11-16T22:35:19.700

Edit: After peeking at your JavaScript, I see that my original observation is a red herring (though it still looks like trouble to me). I try to avoid document.write(). Some better options:

Append the elements to the DOM instead of document.write().
Better yet, rather than outputting JavaScript that outputs HTML from php, just directly output HTML from php, and set the iframe src to your php page directly.

Original answer:

These lines look suspicious:

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

Only if ifrm.contentWindow exists will the following line work. Looking and the second conditional, we know that if it fails there is no ifrm.contentDocument.document and the following line won't work. If the second conditional passes, it seems unlikely that there is an ifrm.contentDocument.document.document property.

By the way, that double ternary expression could be made more concise:

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

The point is moot however, because of the issues stated above.

score 0 · Answer 2 · answered Nov 16 '11 at 22:09

0

why dont you use jQuery and the .append() function and have a seperate page to the heaving lifting?

eg. $(this).append('');

answered Nov 16 '11 at 22:09

David

11
1

score 0 · Answer 3 · answered Nov 18 '11 at 14:35

Alright I figured it out, when writing to the iframe, internet explorer is more picky about the syntax than firefox so I had to use some escapes to get it working. Also I changed the code so now it accepts a rss URL and adds it on button click. please see code below.

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');" />

dynamically build iframe with script that calls rss feed

3 Answers3