layui.define(['jquery', 'element'], function (exports) { "use strict"; var $ = layui.jquery; var pearFrame = function (opt) { this.option = opt; }; pearFrame.prototype.render = function (opt) { var option = { elem: opt.elem, url: opt.url, title: opt.title, width: opt.width, height: opt.height, done: opt.done ? opt.done : function () { console.log("菜单渲染成功"); } } createFrameHTML(option); $("#" + option.elem).width(option.width); $("#" + option.elem).height(option.height); return new pearFrame(option); } pearFrame.prototype.changePage = function (url, loading) { var $frameLoad = $("#" + this.option.elem).find(".pear-frame-loading"); var $frame = $("#" + this.option.elem + " iframe"); $frame.attr("src", url); frameLoading($frame, $frameLoad, loading); } pearFrame.prototype.changePageByElement = function (elem, url, title, loading) { var $frameLoad = $("#" + elem).find(".pear-frame-loading"); var $frame = $("#" + elem + " iframe"); $frame.attr("src", url); $("#" + elem + " .title").html(title); frameLoading($frame, $frameLoad, loading); } pearFrame.prototype.refresh = function (loading) { var $frameLoad = $("#" + this.option.elem).find(".pear-frame-loading"); var $frame = $("#" + this.option.elem).find("iframe"); $frame.attr("src", $frame.attr("src")); frameLoading($frame, $frameLoad, loading); } function createFrameHTML(option) { var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='" + option.url + "' allowfullscreen='true' ></iframe>"; var loading = '<div class="pear-frame-loading">' + '<div class="ball-loader">' + '<span></span><span></span><span></span><span></span>' + '</div>' + '</div></div>'; $("#" + option.elem).html("<div class='pear-frame'>" + iframe + loading + "</div>"); } function frameLoading(iframeEl, loadingEl, isLoading) { if (isLoading) { loadingEl.css({ display: 'block' }); $(iframeEl).on('load', function () { loadingEl.fadeOut(1000); }) } } exports('frame', new pearFrame()); });