将表单加载到 iframe 中

Question

我想将表单加载到 iframe 中。当用户单击书签时，iframe 将加载到随机页面中。

这是到目前为止的代码：

    loginForm = document.createElement("form");
    loginForm.setAttribute("method","Post");
    loginForm.setAttribute("action","http://devserver:8000/action/");
    parameters = {};
    parameters['url'] = parent.window.location;

    for(var key in parameters)
    {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute('type',"hidden");
        hiddenField.setAttribute('name',key);
        hiddenField.setAttribute('value',parameters[key]);
        loginForm.appendChild(hiddenField);
    }

    loginIFrame = document.createElement('iframe');
    loginIFrame.src = "about:blank";
    loginIFrame.appendChild(loginForm);
    loginIFrame.style.top = "0px";
    loginIFrame.style.position='fixed';
    loginIFrame.style.display = 'block';
    loginIFrame.style.zIndex = 100;
    loginIFrame.style.border = "solid #48D236 10px";
    loginIFrame.height = "25px";
    loginIFrame.width = "100%";
    loginIFrame.style.border = 0;
    loginIFrame.id = "loginFrame";
    loginIFrame.name = "loginFrame";
    usernameField = document.createElement("input");
    usernameField.type = "text";
    usernameField.size = 8;
    usernameField.name = "usernameField";
    usernameField.id = "usernameField";

    passwordField = document.createElement("input");
    passwordField.type = "password";
    passwordField.size = 8;
    passwordField.name = "passwordField";
    passwordField.id = "passwordField";


    submitButton.style.position='fixed';
    submitButton.style.top = "60px";
    submitButton.type = "button";
    submitButton.value = "Submit";
    submitButton.onclick = function(){loginUser();};*/
    b.style.position="relative";


    addToBody(loginIFrame);
    loginForm.submit();

最终发生的是整个页面在提交（最后一行代码）而不是 iframe 上重新加载。有什么想法吗？

提前致谢

Answer 1

您可能想尝试使用 loginIFrame.contentWindow.document 而不是 loginIFrame.appendChild 添加表单。

您可能还需要在 iframe 添加到页面后添加表单，因为 contentWindow 属性不可用。

我可能是错的，但我很确定表单没有被添加到 iframe 中，因为您正在使用 appendChild。我真的不认为你可以操纵它，因为它将加载你告诉它加载的 URL（即 about:blank）。

编辑：您可能还想添加 loginForm.setAttribute("target", "loginFrame");

这是我一直在测试的内容，它工作正常：

loginIFrame = document.createElement('iframe');
loginIFrame.src = "about:blank";
loginIFrame.style.top = "0px";
loginIFrame.style.position='fixed';
loginIFrame.style.display = 'block';
loginIFrame.style.zIndex = 100;
loginIFrame.style.border = "solid #48D236 10px";
loginIFrame.height = "100px";
loginIFrame.width = "100%";
loginIFrame.style.border = 0;
loginIFrame.id = "loginFrame";
loginIFrame.name = "loginFrame";

document.body.appendChild(loginIFrame);

var idocument = loginIFrame.contentWindow.document;

loginForm = idocument.createElement("form");
loginForm.setAttribute("target", "loginFrame");
loginForm.setAttribute("method","Post");
loginForm.setAttribute("action","http://devserver:8000/action/");
parameters = {};
parameters['url'] = parent.window.location;

for(var key in parameters)
{
    var hiddenField = idocument.createElement("input");
    hiddenField.setAttribute('type',"hidden");
    hiddenField.setAttribute('name',key);
    hiddenField.setAttribute('value',parameters[key]);
    loginForm.appendChild(hiddenField);
}

loginIFrame.appendChild(loginForm);

loginForm.submit();

• Christian

Answer 2

可能将表单目标设置为 iFrame。我想象，由于您是在“父”页面上下文中创建元素，所以它使用主页作为目标（即使它是嵌入的）。

编辑
您也可以尝试在创建 iFrame 后调用 createElement 以保留上下文。