Hi there.

Sometime ago, I had the idea of building a gadget named RandomMe. Under this, there is a button on the side bar, and whenever the user would click on it, a random page from the site of his choice would open up. The sites are restricted to those with url, which when called redirect you to a random page, like one on Wikipedia, http://en.wikipedia.org/wiki/Special:Random, that redirects you to a random article.

I managed to get the button and the flyout working. When the button is clicked, the flyout opens, and in an iframe shows the random page from Wikipedia. The problem with this is that the whole webpage is shown. What I wanted to do was this, whenever a user would click on the button, the first part of the description (just simple text), plus an image would be shown. To this end, I fiddled around with numerous methods, mostly XMLHttpRequest, but after the eval of the responseText I'm stuck.

Also, if like the user wishes to see the strips at xkcd.com, then only the comic strip should be shown and nothing more, except maybe sharing options.

I am not able to extract the data in the responseText, let alone use it. Also, while the flyout is open, if the button is clicked once more, the flyout should show a different random article.



The code i'm currently using, that calls the webpage in the iframe is as follows:



Code:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<script type="text/javascript" language="javascript" src="gadget.js"></script>
		<link href="style.css" rel="stylesheet" type="text/css" />
    <title>RandomMe</title>
       <script language="javascript">
        System.Gadget.Flyout.onShow = flyoutShowing;
        System.Gadget.Flyout.file = "flyout.html";
        var url = "";


        function setFlyout(urltmp)
        {
          url = urltmp;
          System.Gadget.Flyout.show = true;
        }

        function flyoutShowing()
        {
          System.Gadget.Flyout.document.parentWindow.frame.innerHTML = "<iframe width='500' height='500' frameborder='0' src='"+url+"'></iframe>";
        }
      </script>
 
 
  </head>
	
  <body onload="init()" class="gadget" onclick="setFlyout('http://en.wikipedia.org/wiki/Special:Random');">
    <g:background id="imgBackground" >
    </g:background>
  </body>
</html>
And here is the XMLHttpRequest function I tried to use,

Code:
function setpage(){
				var xmlhttp = null;
				if (window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
					if (typeof xmlhttp.overrideMimeType != 'undefined') {
						xmlhttp.overrideMimeType('text/xml');
					}
				}
				else 
					if (window.ActiveXObject) {
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					else {
						alert('Perhaps your browser does not support xmlhttprequests?');
					}
				xmlhttp.open('GET', "http://en.wikipedia.org/wiki/Special:Random", true);
				
				var myObj = eval ( xmlhttp.responseText );
				
				return myObj;
			}
I can't really understand what exactly is stored in myObj, and how,if at all, I can use it?



Am I doing it wrong? Or can you suggest some other way?