Einen "a" -Link auf einer HTML-Seite automatisch markieren

So habe ich Probleme, dieses Problem anzugreifen und nach einem kleinen Einblick zu suchen.Einen "a" -Link auf einer HTML-Seite automatisch markieren

Also was ich will ist, dass wenn die Seite lädt es ruft die Funktion namens loadFromPdb() aber die Funktion ist in eine andere Funktion geschachtelt, die es schwierig macht.

Der Code

Beginn der demo.js Datei

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(); 
}); 
}

Also ich habe hier ein Dokument Fundament und wenn die ID Last von PDB geklickt wird es läuft eine Anfrage und packt die pdb-Datei aus der Datenbank und lädt dann die Struktur des Proteins auf einer Leinwand.

Die 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>

Things I

So versucht haben, was habe ich versuchen, eine Taste mit und es versteckt, so dass es autoclicks und ruft dann die laden von pdb funktion wie so

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

was schien nicht zu funktionieren. Ich habe versucht,

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

aber es hat Mühe, die Funktion zu finden, und ich kann auch nicht herausfinden, warum, weil ich stark wie das anfühlen würde es leichter machen. Es gibt nur zurück, dass die Funktion gesperrt ist und ich kann es nicht greifen oder es ausführen.

Ich habe versucht, ein separates Skript mit der gleichen Funktion in der HTML, aber das macht ein Chaos von Problemen mit dem Aufruf anderer Funktionen innerhalb dieser Funktion.

Also meine Frage ist, wie lade ich die FromPdb() - Funktion in der HTML-Seite, wenn es lädt?

Quelle

2016-07-07 Suliman Sharif

Die erste Idee sollte funktionieren, aber Sie haben es kompliziert, indem Sie das Skript in die Schaltfläche einfügen. Fügen Sie das Skript einfach als normal zur Seite hinzu und nicht innerhalb der Schaltfläche. Wenn das nicht funktioniert, dann gibt es etwas, das es stoppt, da '$ ('# load-from-pdb'). Trigger (" click ");' ist korrekt. – Archer

Ich habe das Skript am Ende des Body-Tags hinzugefügt, aber es funktioniert leider immer noch nicht, wenn die Seite geladen wird. –

können Sie [JsFiddle] hinzufügen (https: // jsfiddle.net /) Link –

Nicht die beste Lösung, weit davon entfernt, aber einfach, schnell und schmutzig: Erstellen Sie einen "Klon" Ihrer ursprünglichen Funktion, jetzt nicht verschachtelt, und rufen Sie ihn dann von Ihrem "Body Onload". Später finden Sie eine sauberere Lösung (bitte nicht ablehnen, denn meine Antwort ist so gültig wie jede andere - wenn es hässlich ist, dann ist es ein anderer Fall, aber es ist nicht falsch und funktioniert. Denken Sie daran: "Perfekt ist der Feind des Guten ". Wenn Sie eine bessere Lösung haben, seien Sie bitte positiv: teilen Sie es). Vielen Dank.

Quelle

2016-07-07 16:50:12 statosdotcom

Ich habe versucht, meine Funktion innerhalb der demo.js zu klonen, aber ich vermute, das Problem, das ich habe, ist, wenn Funktion ruft es andere Dinge, die in der vorherigen Funktion geschachtelt sind, und es beginnt nur, einen Durcheinander des Codes zu machen. –

Lösung für das Problem,

Also in meiner Javascript-Datei habe ich eine „onReady“ -Funktion und von dort muss sie mit den Skripten von bereits durcheinander so dass am Ende nur ich das Triggerereignis zum onReady hinzugefügt und es funktionierte! Verwenden der unsichtbaren Schaltfläche

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"); 
});

Quelle

2016-07-07 19:08:30

Einen "a" -Link auf einer HTML-Seite automatisch markieren

Antwort

Verwandte Themen