Javascript document.getElementById('button').click() 在我的电脑上工作但不在另一台电脑上工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14643010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById('button').click() working on my pc but not working on another pc
提问by n3ISe
I have a DIVwhen i click on it it will trigger a javascript to click on file upload button which was display:none. It works on my pc with Chrome, Firefox, Chromium. But I wonder why it does not work on my friend pc.
我有一个DIV当我点击它时它会触发一个 javascript 点击文件上传按钮display:none。它适用于我的带有 Chrome、Firefox、Chromium 的电脑。但我想知道为什么它在我朋友的电脑上不起作用。
Is it because the browser issue or what? Me and my friend using different version of Ubuntu. Nothing happen when they click on the DIV
是浏览器问题还是什么？我和我的朋友使用不同版本的 Ubuntu。当他们点击 DIV 时什么也没有发生
Here is my code
这是我的代码
<div onclick='uploadphoto()' title='Click to edit Profile Picture'></div>
<div onclick='uploadphoto()' title='Click to edit Profile Picture'></div>
<form action="js/ajaxuploadprofile.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" style='display:none'>
<input type="hidden" name="maxSize" value="2000000" />
<input type="hidden" name="maxW" value="700" />
<input type="hidden" name="fullPath" value="images/profilepic/" />
<input type="hidden" name="relPath" value="../images/profilepic/" />
<input type="hidden" name="colorR" value="255" />
<input type="hidden" name="colorG" value="255" />
<input type="hidden" name="colorB" value="255" />
<input type="hidden" name="maxH" value="700" />
<input type="hidden" name="filename" value="filename" />
<input type="file" id='filename' name="filename" onchange="ajaxUpload(this.form,'js/ajaxuploadprofile.php?filename=name&maxSize=2000000&maxW=700&fullPath=images/profilepic/&relPath=../images/profilepic/&colorR=255&colorG=255&colorB=255&maxH=700','upload_area','File Uploading Please Wait...<br /><img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> Error in Upload, check settings and path info in source code.'); return false;" />
</form>
<script type='text/javascript'>
function uploadphoto()
{
el = document.getElementById('filename');
if (el.onclick)
{
el.onclick();
}
else if (el.click)
{
el.click();
}
//$('#filename').click(); // <-- this also works for me but not my friend
//document.getElementById('filename').click(); // <-- same
}
</script>
Updated Solution
更新的解决方案
Recently I found out that style='display:none'will have some issue in some browser (or maybe due to the version of the browser). For my case, the version of Chrome is different between mine and my friends and hence it works on my pc but not my friends' pc. However, I am able to solve this problem by replacing style='display:none'with style='visibility:hidden;height:0px'. the code now is working fine in any pc.
最近我发现style='display:none'在某些浏览器中会有一些问题（或者可能是由于浏览器的版本）。就我而言，Chrome 的版本在我和我的朋友之间是不同的，因此它适用于我的电脑而不是我朋友的电脑。但是，我可以通过替换style='display:none'为style='visibility:hidden;height:0px'. 代码现在在任何电脑上都可以正常工作。
visibility:hiddenis just hide the view for the content, it will still occupy some space. Hence i added height:0pxso that it will have same effect like display:none.
visibility:hidden只是隐藏内容的视图，它仍然会占用一些空间。因此我添加height:0px了它，以便它具有与display:none.
回答by spathirana
It can be a browser issue. For an example it might cause problems in IE. If you are using jQuery, you can do as below:
可能是浏览器问题。例如，它可能会导致 IE 出现问题。如果您使用的是 jQuery，则可以执行以下操作：
$('#button').trigger('click');
Or else you can try as below:
或者你可以尝试如下：
if( document.createEvent ) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById('button').dispatchEvent(evt);
} else if( document.createEventObject ) { // For IE 8 and below
var evObj = document.createEventObject();
document.getElementById('button').fireEvent('onclick', evObj);
}
回答by Matthew Strawbridge
According to this article, you can use the following to create a version of getElementByIdthat works even with really old browsers:
根据这篇文章，您可以使用以下内容来创建getElementById即使在非常旧的浏览器上也能正常工作的版本：
function getElement (id)
{
if (document.getElementById)
{
return document.getElementById(id);
}
else if (document.all)
{
return window.document.all[id];
}
else if (document.layers)
{
return window.document.layers[id];
}
}
