我有一个关于 Javascript 小部件的问题。我正在处理的小部件只是将内容嵌入到页面上,而不是使用 iframe。到目前为止它看起来不错。但是在某些情况下,某些用户布局会弄乱小部件。例如,小部件可能需要 300 像素的宽度才能显示。但是父 div 设置为 250px,因此小部件的右侧部分被截掉了。
我想知道应该采取什么样的预防措施来防止这种情况发生?我正在与产品经理交谈,他提到他希望我检查父 div 元素并获取大小,然后在大小不准确时显示备用消息。但是同样,由于这是 Javascript 并且许多不同的浏览器(包括 IE6)都支持该小部件,我想知道这种方法的故障安全性如何?如果我需要在获得有效大小之前一直迭代 DOM 怎么办?我也担心这里的表现。这种额外的检查会减慢我的小部件内容向“好用户”的交付,因为我为所有用户增加了一层复杂性。我不想因为少数错误的用户而惩罚好的用户。
我不在这里使用任何类型的 JS 库,因此任何解决方案都不应该建议使用一个。此外,不使用库的原因只是为了不增加页面加载的额外重量来提供小部件。我知道例如“jquery”很小,但在我的例子中,即使是 24k 压缩对于不包含小部件核心代码的小部件交付来说似乎也是一种矫枉过正。
有没有人处理过这样的问题?您对这些有什么解决方案?
最佳答案
有一些可靠的方法可以使用 JavaScript 确定元素的大小。你说得对,在某些情况下你可能需要向上迭代树,但你得到的答案最终将是非常有效的。
虽然您不希望在该项目中直接包含任何库代码,但您可以考虑查看主要库如何实现其“该元素的宽度是多少”函数来驱动您自己的实现。
关于Javascript 小部件实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3841594/