2013-02-10 32 views
0

当我在我的网站上运行这个脚本时,搜索工作正常,但是当你点击iframe中的链接时,iframe消失,看到我的网站http://gigster.webege.com上的真实工作示例,它位于右上角的文本框中。谢谢你提前JavaScript Iframe不会工作

<script> 
mouseover = false; 

function searchFocus() { 
i = document.getElementById("searchResults"); 
i.style.display = "block"; 
i.onmousemove = function() { 
    mouseover = true; 
} 
i.onmouseout = function() { 
    mouseover = false; 
} 
} 
function searchBlur() { 
if (mouseover) { 
    return; 
} 
document.getElementById("searchResults").style.display = "none"; 
} 

function querify(query) { 
return query.split(" ").join("+") // replaces spaces with +s for url 
} 
function updateIframe(query) { 
query = querify(query); 
var i = document.getElementById("searchResults"); 
var searchEngine = "http://startpage.com/do/m/mobilesearch/?q=" 
var yourSiteToSearch= "site:example.com+" 
i.src = searchEngine + yourSiteToSearch + query; 
</script> 
<body> 
<input oninput="updateIframe(this.value)" onBlur = "searchBlur()" onFocus = "searchFocus(this)" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." type="text"> 
<iframe id="searchResults" style="display:none;background-color:white;" height="100%" width="100%"></input></iframe> 
</body> 

找到了更好的SOLOUTION如果你需要请与我联系

+0

javascript对此很麻烦。 – 2013-02-10 20:09:48

+0

你更好的解决方案是什么? – Stephen 2013-02-11 23:53:23

回答

0

我得到了它的jsfiddle在这里工作:http://jsfiddle.net/FjXyj/1/

我唯一改变的是rearragne你的HTML这样的iframe不在输入标签内:

<input oninput="updateIframe(this.value)" onBlur="searchBlur()" onFocus="searchFocus()" 
size="31" maxlength="255" style="height: 24px;" placeholder="Search..." 
type="text" /> 
<iframe id="searchResults" style="display:none;background-color:white;" 
height="100%" width="100%"></iframe> 

并在您的updateIframe函数中添加最后一个}。

该iframe似乎功能,并且在您点击它时不会消失。

+0

该问题仍然occours ..也许是因为我的CSS我有我会发布我的CSS下面。 – 2013-02-10 22:21:25

+0

http://jsfiddle.net/Z2s96/我把我的代码放在这里 – 2013-02-10 22:27:41

+0

我编辑了一下代码 – 2013-02-10 22:32:08