Javascript 小部件实现

标签 javascript widget

我有一个关于 Javascript 小部件的问题。我正在处理的小部件只是将内容嵌入到页面上,而不是使用 iframe。到目前为止它看起来不错。但是在某些情况下,某些用户布局会弄乱小部件。例如,小部件可能需要 300 像素的宽度才能显示。但是父 div 设置为 250px,因此小部件的右侧部分被截掉了。

我想知道应该采取什么样的预防措施来防止这种情况发生?我正在与产品经理交谈,他提到他希望我检查父 div 元素并获取大小,然后在大小不准确时显示备用消息。但是同样,由于这是 Javascript 并且许多不同的浏览器(包括 IE6)都支持该小部件,我想知道这种方法的故障安全性如何?如果我需要在获得有效大小之前一直迭代 DOM 怎么办?我也担心这里的表现。这种额外的检查会减慢我的小部件内容向“好用户”的交付,因为我为所有用户增加了一层复杂性。我不想因为少数错误的用户而惩罚好的用户。

在这里使用任何类型的 JS 库,因此任何解决方案都不应该建议使用一个。此外,不使用库的原因只是为了不增加页面加载的额外重量来提供小部件。我知道例如“jquery”很小,但在我的例子中,即使是 24k 压缩对于不包含小部件核心代码的小部件交付来说似乎也是一种矫枉过正。

有没有人处理过这样的问题?您对这些有什么解决方案?

最佳答案

有一些可靠的方法可以使用 JavaScript 确定元素的大小。你说得对,在某些情况下你可能需要向上迭代树,但你得到的答案最终将是非常有效的。

虽然您不希望在该项目中直接包含任何库代码,但您可以考虑查看主要库如何实现其“该元素的宽度是多少”函数来驱动您自己的实现。

关于Javascript 小部件实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3841594/

相关文章:

javascript - 您可以创建动态 Firebase 查询吗?

javascript - React - 将搜索添加到表中,正确的方法?

安卓:LED 不打开/关闭

javascript - 如何修复 TypeError : this. _url 在 ArcGIS JS API 中未定义(查询)

css - 将样式添加到无序列表的不同部分,wordpress 小部件

widget - Flutter:如何制作首发 App 指南?

javascript - CSS 从中心过渡到右下角

javascript - 通过选中复选框添加或删除 PHP 变量

javascript - javascript如何通过其原型(prototype)链查找对象的成员?

python - 用于控制 Jupyter 仪表板的多个单元格的小部件