效果如图,在点击充值按钮时添加了小的支付窗口
原生JS中动态添加元素

对接渠道时,遇到一个需要在JS中添加iframe的需求

代码如下:

//添加一个div,div中包含一个iframe
window.onload = function () {

    var div = document.createElement('div');
    div.id = "zhifu_box";
    div.className = "zhifu_box";			//添加div的class的时候注意是className
    div.style.position = "fixed";
    div.style.right = "0";
    div.style.bottom = "0";
    div.style.left = "0";
    div.style.top = "0";
    div.style.top = "0";
    div.style.display = "none";			  //隐藏当前div
    document.body.appendChild(div);

    var iframe = document.createElement('iframe');
    iframe.id="payurl_mainframe";
    iframe.style.height = "100%";
    iframe.style.width = "100%";
    iframe.style.scrolling = "yes";
    $('.zhifu_box').append(iframe)		 //jQuery在class为zhifu_box的类里添加一个append
}

添加一个隐藏的div,div里面包含一个iframe,在点击事件里添加document.getElementById('zhifu_box').style.display = "block";
实现当点击的时候div出现

分类:

技术点:

相关文章: