javascript - 我需要使用用户的输入动态更新 iframe

Question

我已经搜索了好几天、好几周的正确信息，但我一定是错过了。我有一个简单的问题，看起来如此。我有一个 iframe，它加载默认 URL。我还有一个文本框和一个提交按钮。我现在想做的是让用户输入一个URL，然后让该URL显示在iframe中。请不要建议我只是做其他事情，或者问我为什么要这样做。这是一个持续学习的过程。

我有一个java脚本函数，当我使用“onclick”函数时它可以工作。这是 java 脚本:

<script>
function setURL(url){
    document.getElementById('myframe').src = url;
}

这适用于设置 url 函数，如下所示:

<input type="button" id="mybutton" value="Home Page" onclick="setURL('includes/guests.php')" />

该函数在这种情况下工作得很好。但是，我想将“onclick="setURL('includes/guests.php')”替换为用户在这一行中输入的网址:

<input type="text" name="sendurl" size="100">

我不确定如何让它正常工作。我希望 iframe 加载用户输入的 url。如果我使用标准提交，并将表单提交给自身，则可以检查网址的帖子信息，我什至验证了它是否有效。

if($_POST['sendurl'] != null) {
$tisturl = $_POST['sendurl'];
}
echo $tisturl;

echo $tisturl 只是为了告诉我它正确地传递了 url。

我的问题是，现在如何动态地将 iframe 更新为新的 url 值？

Answer 1

这里是一些工作代码，它将用户在文本框中输入的内容并将其用作 iFrame 的 src。检查您的控制台以查看是否还有其他错误(例如混合内容安全警告等)。

<script>
function myFunction() {
    url = document.getElementById('newURL').value;
    url = url.replace(/^http:\/\//, '');
    url = url.replace(/^https:\/\//, '');
    url = "https://" + url;
    document.getElementById('myframe').src = url;
};
</script>
<input type="button" id="mybutton" value="Home Page" onclick="myFunction()" />
<input type="text" id="newURL" />
<iframe id="myframe" src="">

</iframe>

我已经更新了 script删除 http://和https://前置之前的前缀 https://以确保它尝试获取安全资源。