如何将目标添加到 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的action设置为iframe中要加载的url
3. 您需要使用 q 的关键字命名（再次使用属性 name）输入元素，这是 google 所期望的。

像这样的

<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/的演示

---

在 cmets 之后更新
以不同的提交 url 规则处理多个 iframes

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;
}