Question

我正在尝试使用3Dmol.js库来模拟蛋白质。

这里我的代码使用了蛋白质的pdb id你可以测试它并且它可以工作..但我想在我的计算机上使用本地pdb文件..

<!DOCTYPE html>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js">
</script>

<div id="element1" style="height: 1000px; width: 1000px; position: relative;" class='viewer_3Dmoljs' data-pdb1= '2hmi' data-backgroundcolor='0xffffff' data-style='cartoon:color=#ABC8E2' data-surface= 'opacity:1;color:white' data-select1='chain:A' data-surface1='opacity:3;color:green'>
</div>

我尝试了 data-href =＆＃39; fileLocation / fileName.pdb＆＃39;

错误消息：3Dmol-min.js：176 XMLHttpRequest无法加载file：//fileLocation/fileName.pdb。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https。

Answer 1

这是我发现的：

Javascript不允许随意访问本地计算机上的文件。如果是，任何网站都可以窃取您的所有数据。解决方案是为Web服务器提供的文件提供URL。

快速修复：我在Chrome中安装了这个小型服务器link应用。打开应用程序并将文件位置（URL）指向我的代码。它有效！

Answer 2

我尝试了@ana akana答案中提到的方法，但是没有用。相反，可以将文件保存到/static文件夹中

<!DOCTYPE html>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>

<div id="element1" style="height: 1000px; width: 1000px; position: relative;" class='viewer_3Dmoljs' data-href='/static/fileName.pdb' data-backgroundcolor='0xffffff' data-style='cartoon:color=#ABC8E2' data-surface= 'opacity:1;color:white' data-select1='chain:A' data-surface1='opacity:3;color:green'>
</div>

在3Dmol.js中使用pdb文件

2 个答案: