Question

我有以下代码在我的UI中加载图块或“窗口小部件”。偶尔（比如换向）我必须重新绘制瓷砖。某些内容由脚本加载事件生成。在重绘期间，此事件不会再次加载。我怎么能做到这一点？

//html
let $elTile = $('<div/>').appendTo($elContainer);
$elTile.load('tiles/' + tile.name + '/' + tile.name + '.html #' + tile.name + '-content');
//javascript
$.getScript('tiles/' + tile.name + '/' + tile.name + '.js');
//css
$('head').append( $('<link rel="stylesheet" type="text/css" />')
    .attr('href', 'tiles/' + tile.name + '/' + tile.name + '.css'));

以下是一个tile脚本文件的样子：

window.addEventListener("load", function() {
    //do some stuff that may need to be called again on orientation change
});

我从this和this这样的问题中看到，我可能不能只是“卸载并重新加载”脚本，那么还有另一种方法可以再次处理“磁贴初始化”脚本吗？ / p>

Orientation Change只是一个例子，如果可能的话，我希望能够任意调用tile init脚本。

Answer 1

根据您的设备支持和要求，您可以做一些事情。

一个是通过向您的事件监听器添加orientationchange来解决这个问题。

$(window).on('load orientationchange', function(){ /* run your code for both*/});

另一种选择是使用resize事件。

前者将是特定于设备的，因为所有浏览器的行为都不同，如this帖子中所述。

<强>更新您还可以创建基于匿名事件的功能，您可以使用事件作为触发器随意调用该功能。例如。

$(window).on('myCustomEvent', function(){ /*whatever code you want to run at any time*/});

然后你可以从你需要的任何逻辑点触发这样的事件：

if ($(window).width() < 1024){
   $(window).trigger('myCustomEvent');
}

Answer 2

您可以使用其他活动，例如“orientationchange” https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

或者你可以回想一下这样的加载函数：

var myFunction = function () {
  //do some stuff that may need to be called again on orientation change
};
window.addEventListener("load", myFunction);
window.addEventListener("orientationchange", myFunction);
...

您可以随时使用myFunction();

再次拨打电话

重新处理动态加载的“小部件”的代码？

2 个答案: