"틀:SemanticGraph"의 두 판 사이의 차이

2026년 1월 12일 (월) 09:36 판

사용방법

시맨틱 데이터베이스의 특정 노드를 중심으로 하는 네트워크 그래프를 출력하는 틀입니다

{{SemanticGraph | key = }}

@@ 1번째 줄: / 1번째 줄: @@
 <onlyinclude>
 {{#tag:html|
-<iframe width="100%" height="640px" style="border:0" src="https://app.vaquitalab.com/aistory/story01?server=tcp:encyves.aks.ac.kr&db=gwangju2025&project=gwangju&key={{{key|}}}"></iframe>
+<div id="semantic-graph-container">
+<iframe id="semantic-graph-iframe" width="100%" height="640px" style="border:0" src="https://app.vaquitalab.com/aistory/story01?server=tcp:encyves.aks.ac.kr&db=gwangju2025&project=gwangju&key={{{key{{!}}|}}}"></iframe>
 <br/>
 <input type="button" value="전체화면" onclick="location.href='https://app.vaquitalab.com/aistory/story01?server=tcp:encyves.aks.ac.kr&db=gwangju2025&project=gwangju&key={{{key}}}'">
+</div>
+<script>
+(function() {
+  var iframe = document.getElementById('semantic-graph-iframe');
+  var container = document.getElementById('semantic-graph-container');
+  iframe.addEventListener('load', function() {
+    setTimeout(function() {
+      try {
+        var iframeDoc = iframe.contentDocument {{!}}{{!}} iframe.contentWindow.document;
+        var bodyContent = iframeDoc.body.innerHTML;
+        // HTML 길이가 짧거나 특정 패턴이 있으면 에러로 간주
+        if (bodyContent.length < 500 {{!}}{{!}}
+            bodyContent.includes('Simple Ontology Visualization') {{!}}{{!}}
+            bodyContent.includes('vis.js Network')) {
+          hideGraphSection();
+        }
+      } catch(e) {
+        // Cross-origin인 경우 접근 불가
+        console.log('iframe cross-origin');
+      }
+    }, 1000);
+  });
+  iframe.addEventListener('error', function() {
+    hideGraphSection();
+  });
+  function hideGraphSection() {
+    var pTag = container.closest('p');
+    if (pTag) {
+      pTag.style.display = 'none';
+      var prevElement = pTag.previousElementSibling;
+      while (prevElement) {
+        if (prevElement.tagName === 'H2') {
+          prevElement.style.display = 'none';
+          break;
+        }
+        prevElement = prevElement.previousElementSibling;
+      }
+    }
+  }
+})();
+</script>
 }}
 </onlyinclude>