Question

所以我在解决这个问题并寻找一些洞察力方面遇到了麻烦。

所以我想要的是，当页面加载时，它调用名为loadFromPdb（）的函数，但该函数嵌套在另一个函数中，这使得它变得困难。

代码

启动demo.js文件

require(['pv'], function(PV) {

pv = PV;
var io = pv.io;
var structure;

$(document).foundation();
$('#load-from-pdb').click(loadFromPdb);

function loadFromPdb() {
 var pdbId = "1r6a";
 this.value = '';
 this.blur();

//Set up the URL
 var url = 'http://www.rcsb.org/pdb/files/' + pdbId + '.pdb';
   urlPdb = url;
   console.log(url);
    io.fetchPdb(url, function(s) {
        structure = s;
        cartoon();
        viewer.autoZoom();
 });
}

所以在这里我有一个文档基础，当点击来自pdb的id加载时，它会运行一个请求并从数据库中获取pdb文件，然后在画布上加载蛋白质的结构。

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:py="http://genshi.edgewall.org/"
  xmlns:xi="http://www.w3.org/2001/XInclude">

<script src='js/jquery-2.0.2.min.js'></script>
<script src='js/modernizr-2.8.3.min.js'></script>
<script src="js/foundation-5.4.7.min.js"></script>
<script data-main='demo' src='js/require.js'></script>
<link rel='stylesheet' href='css/foundation.css'/>
<link rel="stylesheet" href="css/protein-style.css"/>
</head>
<body>
<div id = "loading"></div>
<div id = "page">
<div id = "viewer-wrap">
    <div id="viewer">
        <canvas id = "canvas"></canvas>
        <nav id = "nav-bar" class = "top-bar" data-topbar role = "navigation">
            <section class = "top-bar-section">
                <div id="static-label">
                </div>
                <div class = "row-collapse"></div>
                <ul class = "right">
                    <li class="has-dropdown">
                        <a href="#">PDBs</a>
                        <ul class="dropdown">
                            <li><a id = sequence-pdb href="#">Sequence of Methyl Transferase</a> </li>
                            <li><a id = sequence-remove-pdb href="#">Remove Sequence</a> </li>
                            <li><a id = hoverOn href="#">Hover</a> </li>
                            <li><a id = hoverOff href="#">Hover Off</li>
                        </ul>
                    </li>
                    <li class = "has-dropdown">
                        <a  href="#">Style</a>
                        <ul id = selectionGraphics class = "dropdown">
                            <li><a id = style-cartoon href ="#" >Cartoon</a></li>
                            <li><a id = style-lines href ="#" >Lines</a></li>
                            <li><a id = style-spheres href ="#" >Spheres</a></li>
                            <li><a id = style-balls-and-sticks href ="#" >Balls and Sticks</a></li>
                            <li><a id = style-points href ="#" >Points</a></li>
                            <li><a id = style-sline href = "#" >Smooth Line Trace</a></li>
                            <li><a id = style-trace href="#">Trace</a> </li>
                            <li><a id = style-tube href="#">Tube</a> </li>
                        </ul>
                    </li>
                    <li class="has-dropdown">
                        <a href="#">Color</a>
                        <ul class="dropdown">
                            <li><a id=color-uniform href="#">Uniform</a></li>
                            <li><a id=color-chain href="#">Chain</a></li>
                            <li><a id=color-element href="#">Element</a></li>
                            <li><a id=color-ss href="#">Secondary Structure</a></li>
                            <li><a id=color-ss-succ href="#">Secondary Structure Succession</a></li>
                            <li><a id=color-rainbow href="#">Rainbow</a></li>
                        </ul>
                    </li>
                    <li class="has-dropdown">
                        <a href="#">Shading</a>
                        <ul class="dropdown">
                            <li><a id=phong href="#">Phong</a></li>
                            <li><a id=hemilight href="#">Hemilight</a></li>
                        </ul>
                    </li>
                </ul>
            </section>

        </nav>
        <div id = "sequence-label" class="scrollingDiv">
        </div>
    </div>
    <div id = 'picked-atom-name'>&nbsp;</div>
    <input type="image" src="photo-camera.png" id="snapshot" />
    <input type="image" src="download-button.png" id="download" />
</div>

我尝试过的事情

所以我尝试的是有一个按钮并隐藏它以便它自动点击然后从pdb函数调用加载

<button class ="md-trigger" id="load-from-pdb" data-modal= "modal">
            <script>
                $(document).ready(function() {
                    $("#load-from-pdb").trigger("click");
                });
            </script>
        </button>

似乎没有用。我试过了

 <body onload = "pv.loadFromPdb()">

但它找不到这个功能有困难，我也无法弄清楚为什么，因为我强烈认为这会让它变得更容易。它只是返回功能被锁定，我无法抓住它或让它运行。

我尝试在HTML中使用具有相同功能的单独脚本，但是在调用该函数中的其他函数时会产生一些问题。

所以我的问题是如何在加载时在HTML页面中加载loadFromPdb（）函数？

Answer 1

不是最好的解决方案，远非它，而是简单，快速和肮脏：创建原始功能的“克隆”，现在不嵌套，然后通过“body onload”调用它。后来你找到了一个更清洁的解决方案（请不要downvote因为我的答案是一个有效的答案 - 如果它是丑陋的等等，那么它是另一种情况，但它没有错并且有效。记住：“完美是善的敌人“。如果你有更好的解决方案，请保持积极态度：分享它。谢谢。

Answer 2

解决问题的方法，

所以在我的Javascript文件中，我写了一个＆＃34; OnReady＆＃34;功能，从那里它必须搞乱脚本，所以最后我只是将触发事件添加到OnReady，它工作了！使用invisble按钮。

function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
        window.clearInterval(intervalID);
        callback.call(this);
    }
}
}


function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}


onReady(function() {
  show('page', true);
  show('loading', false);
  // Click the invisible button to simulate a loading of the PDB file
  $("#load-from-pdb").trigger("click");
});

自动点击＆＃34; a＆＃34;链接在HTML页面上

2 个答案: