Fatal编程技术网
  • jquery/
  • Jquery 自定义谷歌搜索

Jquery 自定义谷歌搜索

jquery iframe

Jquery 自定义谷歌搜索,jquery,iframe,google-custom-search,Jquery,Iframe,Google Custom Search,我想建立一个自定义的谷歌搜索 我试过了 我的代码 <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" /&

我想建立一个自定义的谷歌搜索

我试过了

我的代码

<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>
它起作用了。 然后，当更多数据来自谷歌时，我尝试删除高度滚动条。 但它说的是错误 不安全的JavaScript试图从URL为192.168.9.185/KLMS/CustomGoogleSearch.aspx的框架访问URL为google.com/…的框架。域、协议和端口必须匹配

那么，有没有什么方法可以不使用Iframe（比如ajax调用）就从Google获取数据呢 [编辑]

我试过了

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


项目
人
//获取AJAX http请求
var xmlhttp=getXMLHttpRequest（）；
函数getXMLHttpRequest（）{
var-xhr；
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xhr=newXMLHttpRequest（）；
}
否则{
//IE6、IE5的代码
xhr=ActiveXObject（“Microsoft.XMLHTTP”）；
}
返回xhr；
}
window.doit=函数（）{
xmlhttp.onreadystatechange=函数（）{
document.forms[“cse搜索框”].submit（）；
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
//这在AJAX返回时使用
//xmlhttp.responseText包含从google发回的所有标记
//确定iframe的大小
$（“#if2”）.attr（'width'，'100%）；
$（“#if2”）.attr（'height'，textHeight（xmlhttp.responseText）+“px”）；
//用于设置iframe的内容
//可能必须进行调整，以获得对iframe标记层次结构中特定位置的响应
$（“#if2”）.attr（'src'，“数据：text/html；charset=UTF-8，”+escape（xmlhttp.responseText））；
}
};
open（“POST”http://google.com/cse“，对）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
send（“cx=009827885688477640989:igzwimalyta&ie=UTF-8&q=31”）；
};
//测量返回文本的大小
函数text高度（text）{
$（“正文”）。附加（“”+文本+“”）；
变量高度=$（“#tempSpan”）.height（）；
$（“#tempSpan”）.remove（）；
返回高度；
};
[/编辑]

请帮忙

提前感谢

您可以尝试使用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");
};
测量响应的高度（改编自）：

//测量返回文本的大小
函数text高度（text）{
$（“正文”）。附加（“”+文本+“”）；
变量高度=$（“#tempSpan”）.height（）；
$（“#tempSpan”）.remove（）；
返回高度；
};
您可以点击这里：然后从右下角开始定制。您的标记中是否链接了jQuery？你需要添加它，脚本才能工作。我正在更新我的问题，我已经尝试过了。请检查并找出我的错误。尝试将
放在
标记中，而不是
中！ 
//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;
};