Bookmarklet: Load external site html

Question

Hey guys,

how can i load the html from an external site? (cross domain)

Answer 1

Use Ajax.

Answer 2

If you just want to display the full content of a page from another website, you can use the <iframe> tag.

Ajax (with XmlHttpRequest object) will not work cross-domain (except with some recent browsers, which is probably not OK for your site, considering you want it to work for every visitors...) But you can use a proxy on your server, so that the Ajax request is done to your site (no cross-domain), and the proxy fetches te page from the other domain, and returns it to the Ajax caller.

That proxy can be a script you write (like some simple PHP script that gets parameters, and make a request using curl or any equivalent), or you can use apache's module proxy_http, for instance (just a couple of lines of configuration, no code to write, and much better performance-wise)

Or, if you don't want to use any kind of proxy, you can dynamicaly build a <script> tag, which is not limited to the domain you website is...

Answer 3

Here is an example

HTML and JAVASCRIPT CODE

---

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowExternalHtml.aspx.cs" Inherits="ShowExternalHtml" %>

Untitled Page

<script language="javascript" type="text/javascript">

var  XMLHttp = null;
function Ajax()
{
    if (window.XMLHttpRequest)
      {
      XMLHttp=new XMLHttpRequest()
      }
    else if (window.ActiveXObject)
      {
      XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
      }
      return XMLHttp;

}


function OnStateChanged()
{
     if ((XMLHttp.readyState == 4 || XMLHttp.readyState == "complete") && XMLHttp.status == 200)
        { 
          var value =   XMLHttp.responseText ;

          alert(value);
        }

}


function  FetchRawHtmlFromWebSites()
{
  XMLHttp = Ajax();

  if(XMLHttp != null )
  {

    XMLHttp.onreadystatechange = OnStateChanged;
    var urlToOpen = 'HtmlProvider.aspx?Url=' + document.getElementById("txtUrlInput").value;
    try
    {
        XMLHttp.open("GET",urlToOpen,true);
        XMLHttp.send(null);
    }
    catch(e)
    {
        alert(e);
    }

  }
}


</script>

    <input type="text" id="txtUrlInput" name="txtUrlInput" />
    <input type="button" value="Click this" onclick="FetchRawHtmlFromWebSites()" />

</div>
</form>

Here is what you have to do int the server side. This example is with C#, could use any server side programming languages such as classical ASP, PHP PERL whatever.

---

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Net;
using System.IO;

public partial class HtmlProvider : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string url = Request.QueryString["Url"];
        string result = string.Empty;
        if (!string.IsNullOrEmpty(url))
        {
            string validUrl = string.Format("http://{0}", url);

            HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(validUrl);
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            StreamReader reader = new StreamReader(response.GetResponseStream());
            result = reader.ReadToEnd();
            reader.Close();
        }

        Response.Clear();
        Response.ClearHeaders();
        Response.Write(result);
        Response.End();
    }
}

I hope this example would be helpful to you