用javascript处理弹出窗口答案

【问题标题】：Handling popup window with javascript用javascript处理弹出窗口
【发布时间】：2013-07-10 19:07:45
【问题描述】：

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

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

【问题讨论】：

标签： javascript html refresh

【解决方案1】：

以下内容将在每次点击按钮时显示提示，一旦提示关闭，脚本将在demo div 中添加一个新的<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>

希望 cmets 解释它是如何工作的，如果不在这里问的话:)

【讨论】：

您好，感谢您的回复。添加新链接后，您能否告诉我如何删除基本页面上的“添加链接”选项？

【解决方案2】：

试试这个：

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

干杯

【讨论】：

嗨，Douglas，我不想转到添加后添加的链接。我希望该链接代替“添加链接”显示为“新链接”

【解决方案3】：

您需要某种方式将链接存储在服务器上；刷新页面将导致所有内容都重新执行，并且您不能真正动态地从自身更改 html 文件。带有 postgresql 数据库的 django 之类的东西很容易设置，但这超出了您的问题范围。

也就是说，如果您可以在页面刷新时让链接失效，您可以使用文本区域而不是提示。如果您有 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 标签中。

【讨论】：