0

所以我想知道如何将这个示例中的目标“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
4

1 回答 1

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;
}
于 2014-03-05T01:10:26.763 回答