在IE上,JQuery无法从tinymce获取图像宽度

时间:2012-11-24 01:32:44

标签: jquery image tinymce

此问题仅发生在IE9上。 Firefox和其他浏览器一样工作正常。

我在用户上传图像的textarea上使用TinyMCE(带有ImageManager插件)。 textarea专门用于上传图像。当用户将图像上传/插入tinyMCE textarea并提交页面时 - 我编辑检查图像尺寸以确保其大小正确,然后才能完成表单提交。

我将tinyMCE textarea的html加载到JQuery对象中,然后使用jquery调用对象的.attr(“width”)以确保图像是所需的宽度。

问题是在FireFox上,它工作正常,返回图像的宽度。在IE9上,对.attr(“width”)的jquery调用返回0(零)。

以下是代码:

sString = $('#projectimage1').html();   // fetch the contents of the tinymce form field
objWork.html(sString);      // load a work div with the html contents of the control
// check to see if the image has the correct dimensions
var objImage=null;
objImage = objWork.find("img:first");

alert("image html = " + objImage.html()); // this returns the correct html for the image tag, including the width
alert("image src = " + objImage.attr('src'));   // this returns the correct image src
alert("image width = " + objImage.attr("width"));   // this returns 0 in IE9!

我能想到的唯一问题可能是一个问题,就是当我在tinyMCE textarea中显示图像时“查看源”时 - 图像标记中使用的所有html都是html编码的。所以'<'实际上在源中显示为<而width =“219”属性中使用的引号实际上设置为width =“219”

如果这确实是问题,为什么IE9有这个问题,而不是FireFox?

如果这不是问题 - 有没有人对我如何进行/纠正有任何想法?

感谢专家!

1 个答案:

答案 0 :(得分:1)

在实际渲染新创建的图像之前,浏览器可能尚未从缓存中加载图像,因此将其宽度记录到对象中。不同的浏览器在完成从缓存中加载某些内容的时间上有不同的时间。如果你想要图像的宽度,你应该从它已经加载的地方获得宽度,而不是你要复制它的地方:

var width = $('#projectimage1 img:first').width();

在任何一种情况下,您都必须确保图像在收集宽度之前已完成加载。

或者,您可以检查图像是否已完成加载.complete属性,如果没有,则附加一个onload处理程序,以便在加载完成时记录其宽度。

如果您希望我们对您在View / Source中看到的内容发表评论,您必须向我们提供指向实际网页的链接,以便我们可以看到实际发生的情况。因为您正在像.src那样正确地获取其他属性,所以浏览器似乎不太可能解析HTML。