Custom Google Search

I want build a custom Google search.

My Code

<div>
<form id="cse-search-box" action="http://google.com/cse" target='if2'>
  <input type="hidden" name="cx" value="009827885688477640989:igzwimalyta" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="button" name="sa" value="Search" onclick="doit()" />
</form>
</div>
<div>
<iframe name="if2" id="if2" width="100%" height="600px" marginheight="0" frameborder="0">
</iframe>
</div>

its working. Then I try to remove the height scroll bar when more data is coming from Google. but it is saying error like Unsafe JavaScript attempt to access frame with URL google.com/… from frame with URL 192.168.9.185/KLMS/CustomGoogleSearch.aspx. Domains, protocols and ports must match

so is there any method to fetch the data from Google without using Iframe (like ajax call) [EDIT]

I tried

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/Search.css" />
    <script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="JS/CustomSearch.js"></script>
</head>
<body>
<div>
    <form id="cse-search-box" action="http://google.com/cse" target='if2'>
        <input type="hidden" name="cx" value="009827885688477640989:igzwimalyta" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" />
        <input type="button" name="sa" value="Search" onclick="doit()" />
    </form>
</div>
<div>
    <form id="frmSearch" runat="server" autocomplete="off">
        <div id="mainSearchContainer">
            <!-- Container to show Internal search result -->
            <div class="searchResult">
                <!-- Show Item search result (Currently Tip) -->
                <div class="itemResult">
                    <fieldset>
                        <legend>Items</legend>

                        <div class="resultContainer">
                        </div>
                    </fieldset>
                </div>

                <!-- Show People search result (currently PointCat members) -->
                <div class="peopleResult">
                    <fieldset>
                        <legend>People</legend>

                        <div class="resultContainer">
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
</div>

<div>
    <iframe name="if2" id="if2" width="100%" height="600px" marginheight="0" frameborder="0"></iframe>
</div>
<script type="text/javascript">
    // get AJAX http request
    var xmlhttp = getXMLHttpRequest();
    function getXMLHttpRequest() {
        var xhr;
        if (window.XMLHttpRequest) {
            //code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }
        else {
            //code for IE6, IE5
            xhr = ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }
    window.doit = function () {
        xmlhttp.onreadystatechange = function () {
            document.forms["cse-search-box"].submit();
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //This is used when AJAX returns
                //xmlhttp.responseText contains all markup sent back from google

                //Determine size of iframe
                $("#if2").attr('width', '100%');
                $("#if2").attr('height', textHeight(xmlhttp.responseText) + "px");

                //Used to set the contents of the iframe
                //May have to be adapted to get the response to a specific place in the iframe tag hierarchy
                $("#if2").attr('src', "data:text/html;charset=UTF-8," + escape(xmlhttp.responseText));
            }
        };
        xmlhttp.open("POST", "http://google.com/cse", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("cx=009827885688477640989:igzwimalyta&ie=UTF-8&q=31");

    };
    //Measures the size of the returned text
    function textHeight(text) {
        $("body").append('<span id="tempSpan" style="display:block;">' + text + '</span>');
        var height = $("#tempSpan").height();
        $("#tempSpan").remove();
        return height;
    };
</script>
</body>
</html>

[/edit]

Please help.

thanks in advance

Solution

What you could try is to use an ajax call, and when it returns set the size of the iframe.

// get AJAX http request
var xmlhttp = getXMLHttpRequest();
function getXMLHttpRequest() {
var xhr;
if (window.XMLHttpRequest) {
    //code for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
}
else {
    //code for IE6, IE5
    xhr = ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

Send AJAX request and listen for response:

window.doit = function() {
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //This is used when AJAX returns
            //xmlhttp.responseText contains all markup sent back from google

            //Determine size of iframe
            $("#if2").attr('width', '100%');
            $("#if2").attr('height', textHeight(xmlhttp.responseText) + "px");

            //Used to set the contents of the iframe
            //May have to be adapted to get the response to a specific place in the iframe tag hierarchy
            $("#if2").attr('src', "data:text/html;charset=UTF-8," + escape(xmlhttp.responseText));
        }
    };
    xmlhttp.open("POST", "http://google.com/cse", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("cx=009827885688477640989:igzwimalyta&ie=UTF-8&q=31");
};

Measure the height of the response (adapted from Calculating text width):

//Measures the size of the returned text
function textHeight(text){
  $("body").append('<span id="tempSpan" style="display:block;">' + text + '</span>');
  var height = $("#tempSpan").height();
  $("#tempSpan").remove();
  return height;
};