I want build a custom Google search.
I tried this one
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
What you could try is to use an ajax call, and when it returns set the size of the iframe.
Send AJAX request and listen for response:
Measure the height of the response (adapted from Calculating text width):