javascript - 单击另一个表单的提交按钮后刷新 iframe 中的 url &格式化 iframe 内的 url 内容

标签 javascript html forms

如何通过 JavaScript 重新加载由于 onload 调用而已经“渲染”的 iframe。 我有一个可以添加新用户的页面(通过输入名称后单击提交按钮)。 该页面还在 iframe 中显示所有可用用户(在加载期间,iframe 已“预加载”了用户)。每次我添加新用户并单击提交时,iframe(list) 也应该自动获取更新的列表。

我还想知道如何在隐藏表单中格式化 URL“get”结果。 复制到 iframe 中的 URL 可以在目的地进行修改吗?

我该怎么做?请帮忙!

这是我到目前为止所拥有的:

    <html>
    <head><title>welcome page</title>
    </head>
    <body onLoad ="subMe()">
    <script>
    function subMe(){
            document.getElementsByTagName('form')[1].submit();
    }
    function OnButton2()
{

     document.getElementById("myframe").src ='http://localhost:8000/getusers/' ;
}
    </script>
    <div align="center">
    <h1>Home</h1>

    <form name ="Form0" action= "/cgi-bin/myuser.cgi" method ="get" target="uframe" onsubmit="return OnButton2();">
    Enter Name:<input type="text" id ="name" name="name">
    <input type="submit" value="Create new User">
    </form>
    <iframe id="uframe" name="uframe"></iframe>
    <br>
    <div style="display: hidden;">
        <form action="http://localhost:8000/getusers/" method="get" target="myframe">
        </form>
    </div>
    <iframe id="myframe" name="myframe"></iframe>
    </div>
    </body>

最佳答案

答案肯定正如其他人评论的那样:

document.getElementById("myFrame").src = "http://www.google.com/"

有几个原因可能导致此方法不起作用。最有可能的是JS“同源”政策被违反了。尝试将 src 设置为相对 URL,例如 "getusers/" 并观察控制台错误。

尝试单独调用 OnButton2() 并查看是否可以缩小问题范围。

此外,听起来很像您试图将数据加载到 DOM 中而不重新加载页面。您是否尝试过使用 AJAX ?一旦您掌握了使用它的窍门,它就非常简单且功能强大,并且允许您提交表单并以您希望的任何格式显示结果,而无需使用 iframe 或重新加载页面。

关于javascript - 单击另一个表单的提交按钮后刷新 iframe 中的 url &格式化 iframe 内的 url 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17882500/

相关文章:

javascript - 通过动态更改的变量键访问对象键

javascript - 根据滚动位置更新选择菜单中的选定选项

Javascript form.submit() 在 Firefox 中不工作

javascript - 根据单选按钮选择显示表单

JavaScript 在 AJAX 响应中不起作用

html - 中心和比例输入控件

iOS 7 移动版 Safari 不再支持 &lt;input type ="datetime"/>

css - div 内 100% 宽的表格不喜欢边距

javascript - 是否可以使用Jquery操作表单的目标窗口

javascript - Bootstrap固定位置元素的宽度