javascript - jquery在页面加载后重新启动一个函数

Question

我有一个来自 Turn4JS 的函数它在网站上生成图书用户界面。问题是 Javascript/JQuery 细节接受以绝对像素为单位的宽度和高度的书籍大小，而不是百分比或任何其他格式。

例子:

$( document ).ready(function() {
    $("#guestbook").turn({
        width: 500, /* pixels */
        height: 360,
        autoCenter: true
    });
});

问题在于该网站是移动设备兼容的(当然)，因此对于小型智能手机设备来说，这本书的最大宽度应该是 300 像素，但显然在更大的屏幕上看起来会非常小。

因此，我在 Javascript 上运行媒体查询以根据浏览器大小设置宽度/高度值。我将其设置为在文档就绪以及窗口调整大小和窗口方向更改

时触发的函数

J查询:

function guestbookSize() {
    if ($(window).width() > 1200) {
        $("#guestbookbook").turn({
            width: 700,
            height: 500
        });
    }
    else if ($(window).width() <= 1200 && $(window).width() > 801) {
        $("#guestbookbook").turn({
            width: 500,
            height: 360
        });
    }
    else if ($(window).width() <= 800 && $(window).width() > 360) {
       /* You get the idea */ 
    }
    else if ($(window).width() <= 360) {
        $("#guestbookbook").turn({
            width: 300,
            height: 360
        });
    }
}

$( document ).ready(function() {
    $(document).ready(guestbookSize);
});
$(window).on("orientationchange",guestbookSize);
$(window).resize(guestbookSize);

我很确定我的编码很糟糕，但文档加载调用每次都能正常工作。

窗口调整大小调用不起作用。

所以我的问题是:

如何在不刷新整个页面的情况下重新初始化 guestbookSize 函数中的 .turn 函数的选项？

---

注意事项:

• 我正在使用 JQuery 1.11.3
• 我已阅读 Refire ready event after AJAX reload这看起来很相似但没有运气。
• 我探索了 Turn4JS official documentation这充其量是零散的。
• 我确实有两个选择，要么编辑 Turn4JS jquery 文件以接受看起来很糟糕的百分比，要么简单地调整给定的 width/height 取决于客户端屏幕尺寸/方向。

---

错误:

重新建立 turn 选项时在 firebug 上遇到的错误:

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

..xp("<(?:"+ea+")[\s/>]","i"),ha=/^\s+/,ia=/<(?!area|br|col|embed|hr|img|input|li...

引用 jquery.1.11.3.min.js 的第 4 行。

Answer 1

我在 document.ready 中添加了事件绑定(bind)并删除了重复项。

似乎可以工作 - 在 Chrome 48、FF 43、IE9 上测试过 - 它们都可以工作(在 Windows 上)

$(document).ready(function() {
  initBook(300, 400);
  $(window).on("orientationchange", guestbookSize);
  $(window).resize(guestbookSize);
});

function initBook(w, h) {
  $("#flipbook").turn({
    width: w,
    height: h
  });
}

function guestbookSize() {
  if ($(window).width() > 1200) {
    initBook(700, 500);
  } else if ($(window).width() <= 1200 && $(window).width() > 801) {
    initBook(500, 360);
  } else if ($(window).width() <= 800 && $(window).width() > 360) {
    initBook(400, 360);
  } else if ($(window).width() <= 360) {
    initBook(300, 360);
  }
}

/* to see book resize */

#flipbook {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>

<h2>
Book
</h2>
<div id="flipbook">
  <div class="hard">Turn.js</div>
  <div class="hard"></div>
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
  <div>Page 4</div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>
<hr/>