frame.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. layui.define(['jquery', 'element'], function (exports) {
  2. "use strict";
  3. var $ = layui.jquery;
  4. var pearFrame = function (opt) {
  5. this.option = opt;
  6. };
  7. pearFrame.prototype.render = function (opt) {
  8. var option = {
  9. elem: opt.elem,
  10. url: opt.url,
  11. title: opt.title,
  12. width: opt.width,
  13. height: opt.height,
  14. done: opt.done ? opt.done : function () { console.log("菜单渲染成功"); }
  15. }
  16. createFrameHTML(option);
  17. $("#" + option.elem).width(option.width);
  18. $("#" + option.elem).height(option.height);
  19. return new pearFrame(option);
  20. }
  21. pearFrame.prototype.changePage = function (url, loading) {
  22. var $frameLoad = $("#" + this.option.elem).find(".pear-frame-loading");
  23. var $frame = $("#" + this.option.elem + " iframe");
  24. $frame.attr("src", url);
  25. frameLoading($frame, $frameLoad, loading);
  26. }
  27. pearFrame.prototype.changePageByElement = function (elem, url, title, loading) {
  28. var $frameLoad = $("#" + elem).find(".pear-frame-loading");
  29. var $frame = $("#" + elem + " iframe");
  30. $frame.attr("src", url);
  31. $("#" + elem + " .title").html(title);
  32. frameLoading($frame, $frameLoad, loading);
  33. }
  34. pearFrame.prototype.refresh = function (loading) {
  35. var $frameLoad = $("#" + this.option.elem).find(".pear-frame-loading");
  36. var $frame = $("#" + this.option.elem).find("iframe");
  37. $frame.attr("src", $frame.attr("src"));
  38. frameLoading($frame, $frameLoad, loading);
  39. }
  40. function createFrameHTML(option) {
  41. var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='" + option.url + "' allowfullscreen='true' ></iframe>";
  42. var loading = '<div class="pear-frame-loading">' +
  43. '<div class="ball-loader">' +
  44. '<span></span><span></span><span></span><span></span>' +
  45. '</div>' +
  46. '</div></div>';
  47. $("#" + option.elem).html("<div class='pear-frame'>" + iframe + loading + "</div>");
  48. }
  49. function frameLoading(iframeEl, loadingEl, isLoading) {
  50. if (isLoading) {
  51. loadingEl.css({ display: 'block' });
  52. $(iframeEl).on('load', function () {
  53. loadingEl.fadeOut(1000);
  54. })
  55. }
  56. }
  57. exports('frame', new pearFrame());
  58. });