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

我一直在寻找正确的信息几天和几周，现在我必须错过它。看起来我有一个简单的问题。我有一个iframe，加载一个默认的URL。我也有一个文本框和一个提交按钮。我现在想做的是让用户输入一个URL，然后在iframe中显示URL。请不要暗示我只是做其他事情，或者问我为什么要这样做。这是一个持续的学习过程。我需要使用用户输入动态更新iframe

我有一个java脚本函数，当我使用“onclick”函数时工作。这里是Java的脚本：

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

这工作了一组网址功能，像这样的：

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

该功能可在那种情况下就好了。但是，我想代替，替换“的onclick =” setURL（“包括/ guests.php”）”由用户在此行中输入的网址：

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

我不确定究竟是如何得到这个我想要iframe加载用户输入的url，如果我使用标准提交，并将表单提交给自己，则可以检查url的发布信息，并且我甚至验证了它的工作原理

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

回声$ tisturl是SIMPL Ÿ告诉我，它是正确地携带的网址。

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

来源

2017-04-24 IceRegent

[使用Javascript更改iframe src]可能的副本（http://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript） – Luke

可能会将表单作为目标发布到iframe ... validate如果它是有效的网址，则在服务器处的网址和重定向。请注意，并非所有网站都能在iframe中工作，如果他们有框架破坏标头 – charlietfl

不重复。我读过的每篇文章都会在进行点击操作时处理静态设置url值。我需要做的是将新的url设置为用户输入的内容。 – IceRegent

下面是一些工作代码，用于将用户键入的内容输入到文本框中，并将其用作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前面加上https://，以确保它试图获取资源前，除去http://和https://前缀。

来源

2017-04-24 01:18:59 Luke

谢谢卢克，我会暂时尝试一下。是的，还有很多事情要做，但如果这样做，我会用它来做我的主要工作。 – IceRegent

好吧，我已经尝试过了，它不起作用。这里是它的实际URL：https：//www.hypnomindcontrol.net/testing/mytest.html – IceRegent

好的。我得到的唯一错误是安全错误。由于您通过HTTPS提供服务，因此iframe不会显示任何来自非安全位置的内容。 – Luke

这将工作。它会在文本框中显示加载的iframe的URL，并使用页面中的按钮或计算机上的回车键将文本框中键入的URL加载到iframe。

注意：你不需要有URL，你可以拥有任何你想要的东西，这只是一个例子。

的JavaScript

<script language="JavaScript"> 
function handleKeyPress(e) 
{ 
    var key=e.keyCode || e.which; 
    if (key==13){ 
    event.preventDefault(); 
    GoToURL(); 
    } 
    return false; 
} 

function GoToURL() 
{ 
    var URLis; 
    URLis = document.URLframe.u.value 
    test1 = document.URLframe.u1.value 
    test2 = document.URLframe.u2.value 
// just add more of these above the more text boxes you want to use for it, or you can just have one. 
    { 
     var location= ("http://" + URLis + test1 + "anything_you_want" + test2 + ".com"); // delete or add the name of the text boxes of above. 
     window.open(location, 'iframefr'); 
    } 
} 
</script>

波比HTML

<form name="URLframe" id="URLframe" method="post"> 

<iframe name="iframefr" id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe> 


<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)"> 
<br> 
<input type="text" name="u1" size="71" value="" placeholder=" U1 " onkeypress="handleKeyPress(event)"> 
<br> 
<input type="text" name="u2" size="71" value="" placeholder=" U2 " onkeypress="handleKeyPress(event)"> 

<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go "> 


<script type="text/javascript"> 
function loadurl() { 
    document.getElementById('SeekBox').value = document.getElementById('test').src; 
} 
</script> 

</form>

注：重要的是，该function loadurl()在<form>代码最后并没有在头码作为休息的JavaScript。

来源

2017-11-02 01:58:20 SeekLoad

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

回答

相关问题