将表单加载到iframe中

时间:2010-12-09 18:32:12

标签: javascript ajax forms iframe bookmarklet

我想将表单加载到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上重新加载。有什么想法吗?

提前致谢

2 个答案:

答案 0 :(得分:1)

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

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

我可能错了,但我很确定表单没有添加到iframe中,因为您使用的是appendChild。我真的不认为你可以操纵它,因为它将加载你告诉它加载的URL(即约:空白)。

修改:您可能还想添加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();
  • 基督教

答案 1 :(得分:0)

可能将表单目标设置为iFrame。我想象,因为你在“父”页面上下文中创建元素,它使用主页作为目标(即使它被嵌入)。

修改的 您也可以在创建iFrame之后尝试从iFrame调用createElement以保持上下文。