JavaScript动态创建iframe元素，并且使用POST请求加载页面内容到该iframe中并打印页面(适用于get请求参数过长)

// 创建iframe元素
var iframe = document.createElement("iframe");
iframe.name = "myIframe";
// 将iframe元素添加到文档中
document.body.appendChild(iframe);

// 创建form元素
var form = document.createElement("form");
form.action = "targetUrl";
form.method = "post";
form.target = "myIframe";
form.style.display = "none"; 

// 添加输入字段
var input1 = document.createElement("input");
input1.type = "hidden";
input1.name = "param1";
input1.value = "value1";
form.appendChild(input1);

var input2 = document.createElement("input");
input2.type = "hidden";
input2.name = "param2";
input2.value = "value2";
form.appendChild(input2);

// 将form元素添加到文档中
document.body.appendChild(form);

// 等待 iframe 加载完成后，调用 window.print() 方法进行打印
iframe.onload = function () {
iframe.contentWindow.print()
};
iframe.contentWindow.addEventListener('afterprint', function () {
// 打印完成后，将 iframe 从页面中移除
document.body.removeChild(iframe);
document.body.removeChild(form);
});

// 提交form元素
form.submit();

tips:

form 标签的 target 属性

实例

        <div id="showInfo"></div>
        <form action="1.php" method="post" target="myframe">
            用户名:<input type="text" name="username" id="username"/><br />
            密码:<input type="password" name="password" id="passowrd" />
            <input type="submit" value="提交" id="btn" />
        </form>
        <iframe name="myframe"></iframe>

定义和用法
target属性规定在何处打开 action URL

属性值

 

详解本次案例中的iframe值
form表单的target的用法，是设置返回信息的显示方式，iframe是其中一种，因为那个案例设置的iframe的宽，高，border都为0，是类似做了隐藏，是让它去实现当前页面表单的提交而不进行跳转刷新

没有隐藏的iframe
<iframe name="myframe"></iframe>
//以下是1.php页面简单代码

<iframe name="myframe"></iframe>
//以下是1.php页面简单代码
<?php

    $username=$_POST['username'];
    $password=$_POST['password'];

    echo '用户名：'.$username.' 密码：'.$password;

    ?>

 

 

ps
1.如果此时要获取id为showInfo的div盒子，要通过document.getElementById(“showInfo”).innerHTML=’注册成功’;来获取。
2.如果是target=“_blank”,则这些信息会在新打开的窗口显示。