Logo Cyber-Sicherheit Glossar - Prof. Dr. Norbert Pohlmann

Hier finden Sie den Link (mit Logo) den Sie auf Ihrer Seite einfügen können.

<a href="https://norbert-pohlmann.com/category/glossar-cyber-sicherheit/">
<img src="https://norbert-pohlmann.com/wp-content/uploads/2021/01/Logo-Cyber-Sicherheit-Glossar-
Prof.-Norbert-Pohlmann-1.png" alt="Logo Cyber-Sicherheit Glossar
Prof. Norbert Pohlmann" style="width:60%;"></a>

iFrame

Hier finden Sie das Glossar als iFrame, das Sie auf Ihrer Seite einfügen können. Verwenden Sie auch gerne das dazugehörige CSS.

<div id="search-container-id" class="glossar-search-container">
    <form action="javascript:void(0);" onsubmit="javascript:searchSubmit()">
        <span><input type="text" placeholder="Suche.." id="glossar_search_id"  name="search"></span>
        <span><button type="submit">
            <i class="fa fa-search"></i>
        </button></span>
    </form>
</div>

<iframe id='frameID' class="glossar-iframe" src="https://norbert-pohlmann.com/tag/a/?iframe"></iframe>
<div><p>Das Glossar "Cyber-Sicherheit" wird bereitgestellt von: <a href="https://norbert-pohlmann.com/category/glossar-cyber-sicherheit/">https://norbert-pohlmann.com/category/glossar-cyber-sicherheit/</a></p><div>

<script>
function searchSubmit() {
    
    var input = document.getElementById('glossar_search_id').value;    
    var frameObj = document.getElementById('frameID');
    output = "https://norbert-pohlmann.com/?s=" + input + "&iframe&cat=572";    
    frameObj.src = output;
}
</script>

Im Folgenden finden Sie das CSS zum iframe. Natürlich können Sie es beliebig an Ihre eigenen Bedürfnisse anpassen.

.glossar-iframe {
    height: 40em;
    width: 80%;
}
* {box-sizing: border-box;}

.glossar-search-container {
  float: left;
  font-size: 0px;
  margin: 0px 0px 0px 0px;
  
}

.glossar-search-container input[type=text] {
  color: #303030;
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}
.glossar-search-container span {
    display: inline-block;
    height: 50px;
}
.glossar-search-container button {
  color: white;
  padding: 6px 10px;
  margin: 0px 5px 0px 5px;
  background: #ccc;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.glossar-search-container button:hover {
  background: #bbb;
}

Angular

Der folgende Abschnitt enthält eine Anleitung zur Einbindung des Glossars inkl. Suchfunktion in Angular.

Als erstes muss auf einer beliebigen HTML-Seite folgendes HTML eingefügt werden:

<div id="search-container-id" class="glossar-search-container">
  <form action="javascript:void(0);" onsubmit="javascript:searchSubmit()">
      <span><input type="text" placeholder="Suche.." id="glossar_search_id"  name="search"></span>
      <span><button type="submit">
          <i class="fa fa-search"></i>
      </button></span>
  </form>
</div>

<iframe id='frameID' class="glossar-iframe" src="https://norbert-pohlmann.com/tag/a/?iframe"></iframe>

Die Datei ‘glossar.js’ (z.B. in ‘src/assets/js/’) muss erstellt werden und erhält folgenden Inhalt:

function searchSubmit() {
  
  var input = document.getElementById('glossar_search_id').value;    
  var frameObj = document.getElementById('frameID');
  output = "https://norbert-pohlmann.com/?s=" + input + "&iframe&cat=572";    
  frameObj.src = output;
}

In der Datei ‘angular.json’ (befindet sich im Stamm- bzw. root-Verzeichnis) muss der Pfad zur Datei ‘glossar.js’ hinterlegt werden:

...
"scripts": [
              "path/to/glossar.js"
            ]
...

Als letzter Schritt muss der Angular Server einmal neugestartet werden.