如何將目標添加到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; 
}