用javascript处理弹出窗口

Handling popup window with javascript

本文关键字：窗口 处理 javascript      更新时间：2023-09-26

我有一个基本页面，上面有一个"添加链接"按钮，点击后会弹出一个窗口。弹出窗口有一个用于输入链接的表单字段。一旦输入链接，我想刷新基本页面-基本页面不应该再是"添加链接"，而是改为在弹出窗口中输入的超链接。

我是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>

下面要做的是，每次按下按钮时，都会显示提示，一旦该提示关闭，脚本就会向demo分区添加一个新的<a href=value>New Link</a>标记。

<!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>

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

试试这个：

<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-fiddle中唯一可接受的值是http://jsfiddle.net/

干杯

您需要一些方法将链接存储在服务器上；刷新页面将导致所有内容都被重新执行，并且您不能真正动态地从自身更改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标签中。

相关文章：