Javascript 如何将div连接到iframe中用于搜索站点的数据url
是否有一种方法可以将div连接到也连接到iframe的数据url。到目前为止,我所拥有的是用户在搜索栏中进行搜索,它在iframe中查询搜索,我希望它能做的不是在网站中移动,而是自己。我希望用户能够单击iframe,并将浏览器重定向到iframe中查询的页面。我试图通过创建一个覆盖iframe顶部的不可见div来实现这一点,然后使用变量将它们重定向到div内输入的页面,但是您无法连接到src或数据url的变量是否还有其他变量可以使用 (本质上,我正在尝试做与js和div的iframe相同的事情) 以下是HTML/JS代码:Javascript 如何将div连接到iframe中用于搜索站点的数据url,javascript,css,html,iframe,Javascript,Css,Html,Iframe,是否有一种方法可以将div连接到也连接到iframe的数据url。到目前为止,我所拥有的是用户在搜索栏中进行搜索,它在iframe中查询搜索,我希望它能做的不是在网站中移动,而是自己。我希望用户能够单击iframe,并将浏览器重定向到iframe中查询的页面。我试图通过创建一个覆盖iframe顶部的不可见div来实现这一点,然后使用变量将它们重定向到div内输入的页面,但是您无法连接到src或数据url的变量是否还有其他变量可以使用 (本质上,我正在尝试做与js和div的iframe相同的事情)
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
</head>
<body>
<!--The Search bar as well-->
<form onsubmit="return virtualSubmit(this)";>
<input name="searchtext" type="text" />
<input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>
<div class="holder">
<iframe class="frame"
src="http://www.google.com/custom"
data-url="http://www.google.com/custom?q="
width="250"
height="600" onmouseover="width=400" onmouseout="width=250">
</iframe>
<div class="sampleDiv">
<a class="invisibleDiv" href="http://www.google.com/custom?q="></a>
</div>
</div>
<div class="holder">
<iframe class="frame"
src="http://en.wikipedia.org/wiki"
data-url="http://en.wikipedia.org/wiki/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250">
</iframe>
<div class="sampleDiv">
<a class="invisibleDiv" href="http://en.wikipedia.org/wiki/"></a>
</div>
</div>
<div class="holder">
<iframe class="frame"
src="http://m.dictionary.com/definition"
data-url="http://m.dictionary.com/definition/"
width="250"
height="600" onmouseover="width=400" onmouseout="width=250">
</iframe>
<div class="sampleDiv">
<a class="invisibleDiv" href="http://m.dictionary.com/definition" data-url="http://m.dictionary.com/definition/"></a>
</div>
</div>
<script>
function virtualSubmit(form){
var text = form.searchtext.value;
var targets = document.getElementsByTagName('iframe'),
items = targets.length;
for(var i = 0; i<items; i++){
var target = targets[i],
url = target.getAttribute('data-url');
target.href = url + text;
target.src = url + text;
}
return false;
}
</script>
</body>
要将浏览器重定向到在iframe中单击的链接,请使用父对象(iframe所在的页面对象)。。。因此,在iframe代码中,您可以使用如下内容:
<a onclick="redirect()">click</a>
<script>
function redirect() {
this.parent.location="http://www.acme.org";
}
</script>
点击
函数重定向(){
this.parent.location=”http://www.acme.org";
}
好了,现在我更了解你想要达到的目标了。我想这是不可能的,因为您无法控制iframe内容。它可能已经在链接等上有了一个目标属性,您基本上计划拦截或覆盖该属性…如果您看到javascript,我将尝试将它们重定向到iframe中的查询搜索,它将其作为数据url,因此当用户在我的搜索栏中搜索某个内容时,它将搜索iframe中我尝试搜索的所有网站获取它以便将它们重定向到搜索的站点。
<a onclick="redirect()">click</a>
<script>
function redirect() {
this.parent.location="http://www.acme.org";
}
</script>