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

时间:2014-03-05 00:55:15

标签: javascript html iframe src targeting

所以我想知道如何将此示例“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

1 个答案:

答案 0 :(得分:1)

  1. 您需要使用name属性定位到iframe,而不是id
  2. 您需要将form的操作设置为将在iframe
  3. 中加载的网址
  4. 您需要使用关键字name命名(再次使用属性q )输入元素,因为这是谷歌所期望的。
  5. 这样的事情

    <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帐户提供不同的提交网址

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