以下が、jsmolを使用してファイルを読み込んで分子を表示するアプリのサンプルコードです。セキュリティ上の脆弱性に配慮し、evalや他のサイトへの遷移・リダイレクトなどは行いません。
```html
<!DOCTYPE html>
<html>
<head>
<title>jsmolで分子を表示する</title>
<script src="https://chemapps.stolaf.edu/jmol/jsmol/JSmol.min.js"></script>
</head>
<body>
<h1>jsmolで分子を表示する</h1>
<form>
<label for="file-input">分子ファイルを選択してください：</label>
<input type="file" id="file-input">
<button type="button" id="load-button">表示</button>
</form>
<hr>
<div id="jsmol-container"></div>
<script>
let jmolApp = null;
Jmol._isAsync = false;
Jmol.getApplet("#jsmol-container", {
width: "100%",
height: "400",
j2sPath: "https://chemapps.stolaf.edu/jmol/jsmol/j2s",
script: "set antialiasDisplay ON;set defaultVDW babel;load data",
disableJ2SLoadMonitor: true,
disableInitialConsole: true,
readyFunction: function(applet) {
jmolApp = applet;
}
});
const loadButton = document.getElementById("load-button");
loadButton.addEventListener("click", () => {
const fileInput = document.getElementById("file-input");
const file = fileInput.files[0];
if(file && file.type === "chemical/x-mdl-molfile") {
const reader= new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
const molData = e.target.result;
jmolApp.script("set data '"+molData+"';");
}
} else if(file && file.type !== "chemical/x-mdl-molfile") {
// 関連するジョーク
alert("分子表示にはmolファイルを使用してください。アセトアミノフェンは飲み過ぎに注意！");
}
});
</script>
</body>
</html>
```
このアプリでは、ファイル選択フォームからmolファイルを読み込み、jsmolで分子を表示します。分子は画面上部にあるフォームの「分子ファイルを選択してください」ボタンを押すことで表示されます。molファイル以外が選択された場合には、選択されたファイルがmolファイルでない旨を警告します。また、ファイルを選択する前に表示ボタンを押した場合でも何も起こりません。
