Loading a form into an iframe

I want to load a form into an iframe. The iframe will be loaded into a random page when the user clicks the bookmarklet.

Here is the code so far:

    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 = docu开发者_Go百科ment.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();

What ends up happening is the entire page gets reloaded on the submit (last line of code) rather than the iframe. Any ideas?

Thanks in advance

You might want to try adding the form using loginIFrame.contentWindow.document instead of loginIFrame.appendChild.

You might also need to add your form after the iframe has been added to the page since the contentWindow property won't be available.

I could be wrong, but I'm pretty sure that form isn't being added to the iframe, because you are using appendChild. I really don't think you can manipulate it that wa since it will be loading the URL you tell it to load (i.e. about:blank).

Edit: You might also want to add loginForm.setAttribute("target", "loginFrame");

Here is what I've been testing with and it works fine:

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

Possibly set the form target to the iFrame. I'm imagining, since you're creating elements within the "parent" page context, it's using the main page as a target (even though it's embeded).

EDIT You could also try calling createElement from the iFrame after you've created it to keep context too.