Question

我使用名为js-graph-it的连接器框架来连接我网页上的元素。当我运行一个html文件作为该项目的工作演示时，它工作正常，但当我将其包含在项目中时，连接线丢失了。

这是代码

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="js-graph-it.css">

       <style>
      .canvas {
        font-family: tahoma;
      }
      .block {
        position: absolute;
        border: 1px solid #7DAB76;
        background-color: #BAFFB0;
        padding: 3px;
      }
      /*.connector {
        background-color: #FF9900;
      }*/
      .source-label, .middle-label, .destination-label {
        padding: 5px;
      }
    </style>
  </head>
  <body onload="initPageObjects();">


        <div class="canvas"
      style="width: 1350px; height: 1250px;">

       <h1 class="block" id="h1_block"
        style="left: 100px; top:10px;">
          h1 block
      </h1>

      <h2 class="block" id="h2_block"
        style="left: 800px; top: 100px;">
        h2 block
      </h2>

      <h3 class="block" id="h3_block"
        style="left: 100px; top: 180px;">
        h3 block
      </h3>

      <h2 class="block" id="h4_block"
        style="left: 100px; top: 480px;">
        h2_new block
      </h2>

  <!--   <div class="connector h1_block h2_block"></div>

        <img src="arrow.gif" class="connector-start">
        <img src="arrow.gif" class="connector-end">

        <label class="source-label">start</label>
        <label class="middle-label">middle</label>
        <label class="destination-label">end</label>

    </div> -->

    <div class="connector h1_block h2_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>

    <div class="connector h2_block h3_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>

    <div class="connector h2_block h4_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>


  </body>
</html>

和JSFiddle link

我还附上了屏幕截图，证明它是一个独立的文件。 js-chart-it implemenattaion

Answer 1

在JSFiddle中将onDomready更改为No wrap - in <head>：http://jsfiddle.net/j6nhc9y1/3/

基本上，对于那些“包装”选项，initPageObjects函数不会位于需要从HTML内联事件处理程序调用的顶层。

更好的选择是在脚本中创建动态事件处理程序，例如：

window.addEventListener('load',initPageObjects);

没有显示连接线

1 个答案: