本文主要是介绍ifram在bootstrap modal中演进的自适应迭代至1.0版本，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- 需引入layer.js loading加载遮罩层会被使用到
- 0.1版本显示页面但大小会随机变化。
- 0.2版本内嵌页面与主页面都要js控制,页面有时候不能显示。
- 1.0版本内嵌页面无需写额外js，只需主页面js控制，代码实现了自适应，且显示正常。
- ifram可能会在加载关闭时内存泄漏，此处显式调用ifram clear防止内存泄漏
var Tools = (function ($) {var IframeFirstClear = function (iframedom) {var ifd = $(iframedom);if (ifd.length > 0) {ifd[0].contentWindow.document.write(''); //清空iframe的内容ifd[0].contentWindow.close(); //避免iframe内存泄漏ifd.remove(); //删除iframeconsole.log('iframe-clean');}};return {IFC: IframeFirstClear};})(jQuery);Tools.IFC("#EPageIframe");- 配合bootstrap modal引入ifram自定义插件
(function ($) {$.extend({modelshowiframe: function (options) {//面向对象的写法new modeladapt(this, options);}})var modeladapt = function (ele, options) {if (options == null)alert("arg error")this.element = ele;this.options = {labledom: "#EPageIframeModalLabel",labletext: "",iframedom: "#EPageIframe",iframesrc: "",modeldom: "#EPageIframeModal"};this.options = $.extend({}, this.options, options);this.init();}//初始化对象modeladapt.prototype = {init: function () {//初始化this.ModelIframe();},ModelIframe: function () {var that = this;$(that.options.labledom).text(that.options.labletext);$(that.options.modeldom).modal({ show: true, backdrop: "static" });var index = layer.load(0, { shade: false }); //loading层var iframe = document.createElement("iframe");iframe.id = "EPageIframe";iframe.src = that.options.iframesrc;iframe.style.width = "100%";iframe.setAttribute("frameborder", 0);iframe.setAttribute("scrolling", "no");document.getElementById("EPageIframeDiv").appendChild(iframe);console.log('iframe-ready');if (iframe.attachEvent) {$(iframe).load(function () {setTimeout(function () {var heightiframe = iframe.contentWindow.document.documentElement.scrollHeight;iframe.height = heightiframe;console.log('iframe-load-ok-A-' + heightiframe);layer.close(index); //iframe加载完毕 }, 100);});} else {$(iframe).load(function () {setTimeout(function () {var heightiframe = iframe.contentDocument.body.scrollHeight;iframe.height = heightiframe;console.log('iframe-load-ok-B-' + heightiframe);layer.close(index); //iframe加载完毕 }, 100);});}}}})(window.jQuery);</script>- bootstrap modal代码
<div class="modal fade" id="EPageIframeModal"><div class="modal-dialog" ><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="EPageIframeModalLabel">消息</h4></div><div class="modal-body" id="EPageIframeDiv" style="clear:both;"></div></div></div>
</div>- 使用指南,主页面使用代码
- labletext 头部名字
- iframesrc 嵌套页面地址
$.modelshowiframe({labletext: "测试弹出页面",iframesrc: "/AAA/show/" + Id});这篇关于ifram在bootstrap modal中演进的自适应迭代至1.0版本的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
