有没有一种方法可以将 div 连接到也连接到 iframe 的数据 url。到目前为止我所拥有的是用户在搜索栏中进行搜索并且它查询在 iframe 内搜索，我想要它做的是而不是能够在网站上移动它自己我想要用户能够单击 iframe 并将浏览器重定向到 iframe 中查询的页面。我尝试通过创建一个覆盖 iframe 顶部的不可见 div 来尝试此操作，然后使用变量将它们重定向到 div 内输入的页面，但是您无法连接到 src 或数据 url 的变量是否有另一个我可以使用的变量？
(本质上，我正在尝试做与我对 js 和 iframe 与 div 所做的相同的事情)
这是 HTML/JS 代码:
<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>
这是CSS代码:
body {
color: purple;
background-color: #663300;
}
.holder {
width: 400px;
height:300px;
position:relative;
}
.frame{
width: 100%;
height: 100%;
}
.sampleDiv
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:transparent;
}
.invisibleDiv
{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
a {
display: block;
}
最佳答案
要将浏览器重定向到在 iframe 中单击的链接，请使用 parent(您的 iframe 所在的页面对象)...因此在您的 iframe 代码中，您将使用类似的东西:
<a onclick="redirect()">click</a>
<script>
function redirect() {
this.parent.location="http://www.acme.org";
}
</script>
好的，现在我更好地理解了您要实现的目标。我想这是不可能的，因为您无法控制 iframe 的内容。它可能已经在链接等上具有目标属性，并且您基本上正计划拦截或覆盖该属性...
关于javascript - 如何将 div 连接到 iframe 中用于搜索站点的数据 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22594637/