Question

我的基页有一个“添加链接”按钮，点击后会出现一个弹出窗口。弹出窗口有一个表单字段来输入链接。输入链接后，我想刷新基页 - 基页不应该是“添加链接”，而是更改为在弹出窗口中输入的超链接。

我是Javascript和html的新手。到目前为止，我设法在基页上创建一个按钮，然后单击显示一个弹出窗口，其中包含链接的表单字段。但是我无法使用新链接刷新基页。

以下是我的代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Add Link</button>

<p id="demo"></p>

<script>
function myFunction()
{
    prompt("Please Enter the Link"); 
}
</script>

</body>
</html>

Answer 1

试试这个：

<button onclick="myFunction()">Add Link</button>

<p id="demo"></p>

<script>
function myFunction()
{
    var url = prompt("Please Enter the Link"); 
    window.location = url;
}
</script>

http://jsfiddle.net/douglasloyo/rtghQ/ js小提琴中唯一可以接受的值是http://jsfiddle.net/

干杯

Answer 2

以下操作是每次按下按钮时，都会显示提示，一旦该提示关闭，脚本就会向<a href=value>New Link</a> div添加新的demo标记。

<!DOCTYPE html>
<html>
    <body>
        <button onclick="myFunction()">Add Link</button>
        // This needs to be a 'div' so it can have elements inside it.            
        <div id="demo"></div> 
        <script>
            var demo = document.getElementById('demo');
            function myFunction()
            {
                // Stores the value from the prompt() in the variable 'value'
                var value = prompt("Please Enter the Link"); 
                var link = document.createElement('a'); // Create an <a> tag
                link.setAttribute('href', value); // Set the link's URL to the value.
                link.innerHTML = "New Link"; // Set the link's display text.
                demo.appendChild(link); // Add the link to the demo div.
            }
        </script>
    </body>
</html>

希望评论解释它是如何工作的，如果不是在这里问：）

Answer 3

您需要一些方法来存储服务器上的链接;刷新页面将导致所有内容重新执行，并且您无法真正动态地更改html文件。像django和postgresql数据库这样的东西很容易设置，但这超出了你的问题的范围。

也就是说，如果您在刷新页面时链接无法生存，则可以使用文本区域而不是提示。这是一个例子，如果你有jQuery：

<head>
<script>
$(function() {
$("#addLink").click(function() {
    var linkStr = document.getElementById("linkInput").value;
    $("#linkArea").html("<a href=" + linkStr + ">Your link</a>");
});
})
</script>
</head>

<span id="linkArea">
    <input id="addLink" type="submit" value="Add Link: ">
    <input id="linkInput" type="text" value="(enter link)">
</span>

这是一个尝试它的jsfiddle： http://jsfiddle.net/tRcUp/

哦，通常你应该把脚本放在head标签中。

使用javascript处理弹出窗口

3 个答案: