jquery 页面加载后重新启动功能

Question

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

示例：

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

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

因此，我运行在 Javascript 上进行媒体查询以根据浏览器大小设置 width/height 值。我将其设置为一个函数，该函数在 document ready 以及 windows resize 和 window 方向改变

Jquery:

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);

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

window 调整大小调用不起作用。

所以我的问题是：

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

备注:

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

错误:

firebug 重新建立 turn 选项时遇到错误：

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 中添加了事件绑定并删除了重复项。

似乎有效 - 在 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/>

jquery 页面加载后重新启动功能

jquery re-initiating a function after page load

javascript

jquery

screen-orientation