修复一处上传不了的问题
原因居然是因为我关闭了内存缓存。
网页有dom是动态生成的，如img。
说来也很奇葩，内存缓存关了后，ImageLoader::shouldLoadImmediately在第二次的时候返回了false，导致延迟设置了setImage，导致在layout的时候没有正确的图片大小，导致网页的js获取宽度的时候是个0.
另外还有个bug，是会触发断言。
原因是：https://chromium.googlesource.com/chromium/src/+/6f9a69691d825e9bb62802b2ea5ac65ed29eb0ba%5E%21/#F0
这里获取containingBlockForAbsolutePosition
的逻辑需要改改。不然在对position object的时候会有问题。
下面是测试网页
<!DOCTYPE html>
<html style="height:100%"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" id="htmlhtml">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="P3P" content="CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"">
<title>来聊吧</title>
<meta content="WebSocket 聊天室 来聊吧" name="description">
<meta content="WebSocket 聊天室 来聊吧" name="keywords">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" type="text/css" href="webuploader.css">
<style>
.layui-layer1 {
left: 0 !important;
}
</style><link rel="stylesheet" href="http://39.108.120.249:843/client/JS/min/layer/skin/layer.css" id="layui_layer_skinlayercss"></head>
<body style="height: 100%;" id="bodybody">
<div id="zone_center" style="width: 100%; height: 100%;">
<div id="div_msgpanel" class="panel panel-success" style="position:relative;height:100%">
<div style="background-color: #f6f5f4; height: 40px;" id="background_top_2">
<div style="float:left;margin-top:4px;" id="background_top_top">
<a id="a_uploadimg" style="margin-right:10px;" title="上传图片111W" class="webuploader-container">
<div class="webuploader-pick" id="sctp">
<img style="padding-top:4px;" class="img_uploadimg" src="uploadpic.png">
</div>
<!--
<div id="rt_rt_1cb761apg8mj1l1f141friv1mrp1" style="position: absolute; top: -3px; left: 0px; width: 24px; height: 28px; overflow: hidden; bottom: auto; right: auto;">
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="application/octet-stream,image/*">
<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
</div>-->
</a>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="jquery-1.9.1.min.js"></script>-->
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
var g_button = null;
function FilePicker() {
var innerHTML = "<div class=\"webuploader-pick\" id=\"sctp\"><img style=\"padding-top:4px;\" class=\"img_uploadimg\" src=\"uploadpic.png\"></div>";
console.log("setTimeout begin---------------------");
g_button = $(document.createElement('div'));
g_button.attr('id', 'sctp_top');
g_button.html(innerHTML);
g_button.addClass('webuploader-pick');
$("#a_uploadimg").html(g_button);
var width = g_button.outerWidth ? g_button.outerWidth() : g_button.width();
var height = g_button.outerHeight ? g_button.outerHeight() : g_button.height();
console.log("FilePicker.width:" + width + ", height:" + height);
}
function getContainer() {
var parent = $("#a_uploadimg");
console.log("getContainer:" + parent);
container = $( document.createElement('div') );
container.attr('id', 'rt_rt_1cb761apg8mj1l1f141friv1mrp1');
container.css({
position: 'absolute',
top: '0px',
left: '0px',
width: '1px',
height: '1px',
overflow: 'hidden'
});
parent.append( container );
parent.addClass('webuploader-container');
return container;
}
setTimeout(function () {
//return;
FilePicker();
var labelNaive = document.createElement('label');
var container = getContainer();
var label = $(labelNaive);
var input = $(document.createElement('input'));
var arr, i, len, mouseHandler;
input.attr('type', 'file');
input.attr('name', 'file');
input.addClass('webuploader-element-invisible');
label.attr('id', 'test_label');
console.log("Html5Runtime.register( 'FilePicker')" + label);
labelNaive.addEventListener("click", function () {
//alert("Hello World");
console.log("Hello World~~");
});
label.on('click', function () {
console.log("label.on( 'click')");
input.trigger('click');
});
label.css({
opacity: 0,
width: '100%',
height: '100%',
display: 'block',
cursor: 'pointer',
background: '#ffffff'
});
if (true/*opts.multiple*/) {
input.attr('multiple', 'multiple');
}
container.append(input);
container.append(label);
///
var width = g_button.outerWidth ? g_button.outerWidth() : g_button.width();
var height = g_button.outerHeight ? g_button.outerHeight() : g_button.height();
container.css({
bottom: 'auto',
right: 'auto',
width: width + 'px',
height: height + 'px'
});
console.log("setTimeout end-------------------");
}, 1000);
</script>
</body></html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年04月19日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读