嵌入HTML - 每次都有一个新链接

时间:2015-07-20 21:44:51

标签: javascript html variables hyperlink embed

到目前为止,我有这段代码。

<html>

<object data=http://www.tagpro.eu width="850" height="800"> <embed src=http://www.tagpro.eu width="650" height="700"> </embed></object>

</html>

我有一张表格。

<form>
Game:<br>
<input type="text" name="firstname">
<br>
Link:<br>
<input type="text" name="lastname">
</form>

我需要什么:

如果表单无论链接是什么,请将嵌入网站设置为该特定链接。例如,如果我在链接部分写了google并单击“提交”,您将在我的网站上看到谷歌的网页。

谢谢!

1 个答案:

答案 0 :(得分:0)

我已经调整了你的代码:

<form id="demo-form">
    Game:<br>
    <input type="text" name="game" id="game" value="bootstrap datepicker">
    <br>
    Link:<br>
    <input type="text" name="link" id="link" value="https://bootstrap-datepicker.readthedocs.org/en/latest/">
    <br />
    <input type="submit" value="Go" />
</form>

<object id="demo-object" data=https://jqueryui.com/datepicker/ width="850" height="800">
    <!--<embed src=http://www.tagpro.eu width="650" height="700"> </embed>-->
</object>

我使用了一些javascript如下:

document.getElementById("demo-form").onsubmit = function () {
    var game = document.getElementById("game").value;
    var link = document.getElementById("link").value;
    document.getElementById("demo-object").setAttribute('data', link)
    // Return false to prevent the default form behavior
    return false;
}

请检查fiddle。但是,这不适用于每个站点。例如,我尝试使用谷歌链接时出错。此演示也适用于Firefox 39.0和Internet Explorer 9,但不适用于Chrome 43.0.2357.130。然而,外面的小提琴也适用于Chrome。

如果您需要在页面刷新之间保持选择,一种可能的解决方案是使用jquery-cookie 将选择存储在cookie中,代码将更改如下:

if ($.cookie("link")) {
    // Restore the last selection from cookie
    document.getElementById("link").value = $.cookie("link");
    document.getElementById("demo-object").setAttribute('data', $.cookie("link"))
}
document.getElementById("demo-form").onsubmit = function () {
    var game = document.getElementById("game").value;
    var link = document.getElementById("link").value;
    document.getElementById("demo-object").setAttribute('data', link)
    // Store the selection in a cookie
    $.cookie("link", link);
    // Return false to prevent the default form behavior
    return false;
}