自定義Google搜索

我想構建自定義的Google搜索。自定義Google搜索

我的代碼

<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>

其工作。然後，我嘗試在Google提供更多數據時移除高度滾動條。，但它說錯誤如 不安全的JavaScript嘗試訪問框架與谷歌URL來自框架與URL 192.168.9.185/KLMS/CustomGoogleSearch.aspx。域，協議和端口必須匹配

所以是有任何不使用I幀（如AJAX調用）來從谷歌數據方法 [編輯]

我試圖

<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>

[/編輯]

請幫忙。

在此先感謝

來源

2012-11-08 bhagirathi

你可以去這裏：HTTP：// WWW .google.com/cse/tools/create_onthefly從最右邊的底部去定製。 – Jai

什麼你可以嘗試是使用AJAX調用，當它返回時設置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; 
}

發送AJAX請求和監聽響應：

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"); 
};

測量響應（改編自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; 
};

來源

2012-11-08 08:17:31 kumaheiyama

它不適合我 – bhagirathi

你的標記中鏈接了jQuery嗎？您需要添加它才能使腳本正常工作。 – kumaheiyama

我正在更新我的問題，我試過了。請審查並找出我的錯誤。 – bhagirathi

自定義Google搜索

回答

相關問題