如何将目标添加到src引号末尾

Question

因此，我想知道如何将此示例中的目标“google-iframe”添加到iframe的源链接中。

下面是当前代码我有：

<!-- CSS --> 
<style> 
     body { 
    color: purple; 
    background-color: #663300 } 
    </style> 

<form target="google-iframe"> 
     <input id="search" type="text"/> 
     <input type="image" onclick="google-iframe" src="Searchbutton.png" alt="Search Button" height="20" width="20"> 
     <iframe id="google-iframe" src="http://www.google.com/custom?q=" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe> 
</form> 

我想拥有它是这样的：

<iframe id="google-iframe" src="http://www.google.com/custom?q=" + "google-iframe" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe> 

的变化是它说

src=http://www.google.com/custome?q= 

那什么被定义为“google-iframe”将被插入到src的末尾，例如

src=http://www.google.com/custome?q=WhatEverIsEntedInTheGoogle-Iframe 

Answer 1

1. 您需要使用name属性用于靶向iframe而不是id
2. 您需要设置form的作用是将在iframe
加载的网址
3. 您需要命名（使用属性name再次）输入元素的关键字为q，因为这是谷歌期望的。

因此，像这样

<form action="http://www.google.com/custom" target="google-iframe" method="get"> 
    <input name="q" type="text" /> 
    <input type="image" onclick="google-iframe" src="Searchbutton.png" alt="Search Button" height="20" width="20"/> 
</form> 

<iframe name="google-iframe" src="http://www.google.com/custom" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe> 

演示在http://jsfiddle.net/gaby/4bAjT/1/

---

更新的意见后
有不同的规则来说明多重iframes并对提交URL

的Html

<form onsubmit="return virtualSubmit(this)";> 
    <input name="searchtext" type="text" /> 
    <input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/> 
</form> 

<iframe src="http://www.google.com/custom" 
     data-url="http://www.google.com/custom?q=" 
     width="250" 
     height="600"></iframe> 

<iframe src="http://en.wikipedia.org/wiki" 
     data-url="http://en.wikipedia.org/wiki/" 
     width="250" 
     height="600"></iframe> 

和的JavaScript

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.src = url + text; 
    } 

    return false; 
}