Question

我想要一个文本框并在下面提交带有iframe的按钮。

当用户在文本框中输入内容时，我希望使用该查询加载多个iFrame。

例如，如果用户键入＆＃34; Cars＆＃34;，我希望显示3个iFrame，例如Bing，Yahoo和Google搜索汽车。

并非所有网址都具有相同的结构

例如，可能是＆＃34; google.com/cars"而另一个可能是＆＃34; bing.com/search/cars"

这是一个虚构的例子，但我希望它有助于明确指出

以下是我想通过切换＆＃34; TICK＆＃34;来修改的一些网址。与用户输入字段中的任何内容

http://finance.yahoo.com/q/h?s=TICK+Headlines

http://www.otcmarkets.com/stock/TICK/filings

这些链接将位于具有特定边距和格式的不同iFrame中

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width:  736px;">

Answer 1

首先：

这不起作用，谷歌不允许自己获得iframed

但是，我可以回答如何更改iframe：

// From the page that has the iframe
document.getElementById('IdOfTheIframe_1').href = "google.com/#q="+your_value;
// From the iframe itself:
window.location = "google.com/#q="+your_value;

Answer 2

Javascript允许您设置html属性，以便您可以使用此代码

document.getElementById('idofyouriframe').setAttribute("href","newUrl");

Answer 3

有几种不同的方法可以做到这一点，但这里有几个

页面上已有3个<IFRAME>，您只需设置其文档位置（即SRC属性）
您可以使用Javascript动态创建IFRAME元素，然后将其位置设置为相应的网址。

假设您的文本框<input>字段位于<form>元素中，您可以设置表单onSubmit以调用执行此操作的Javascript函数。

以下是使用第一种方法的示例：

<HTML>
<HEAD>
<SCRIPT>
    function loadIframes(){
        document.getElementById('if1').href = 'BING URL PREFIX'+document.getElementById('textfield').value;
        document.getElementById('if2').href = 'YAHOO  PREFIX'+document.getElementById('textfield').value;
        document.getElementById('if3').href = 'GOOGLE  PREFIX'+document.getElementById('textfield').value;
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM onsubmit="loadIframes()">
    <INPUT type="text" name="textfield" id="textfield"/>
    <INPUT type="submit" value="Search"/>
</FORM>
<IFRAME id="if1" width="300" height="300"/>
<IFRAME id="if2" width="300" height="300"/>
<IFRAME id="if3" width="300" height="300"/>
</BODY>
</HTML>

根据用户输入替换部分iFrame URL

3 个答案: