时间戳

首页 > 解决方案 > 如何在 jQuery / JS 的同一页面上的 4 个 div 中加载 4 个不同的页面（包含 d3js 图）？

javascript - 如何在 jQuery / JS 的同一页面上的 4 个 div 中加载 4 个不同的页面（包含 d3js 图）？

问题描述

我几乎尝试了所有方法，但我找不到让它正常工作的方法。

我有什么？

我想要什么 ？

每个 div 包含 1 个对应的 html 文件。当我单击表格（“标题”之一）时，div会显示

结果是什么 ？

基本上，所有的 html 页面都加载在同一个div. 其他 3 个是空白的……即使没有被调用，也可以在同一个 div 中相互绘制图形。

有什么奇怪的？

当我加载“普通”页面（没有图表 d3js）时，它工作得很好......我想加载图表时一定有问题谢谢你的帮助:)

这是代码：

<body>
    <div id="app">
        <table width="70%" align="center">
            <tr>
                <th>Sample id</th>
                <th @click='gcmodal = !gcmodal'>GC Dropout</th>
                <th @click='atmodal = !atmodal'>AT Dropout</th>
                <th @click='dupmodal = !dupmodal'>% Duplicates</th>
                <th @click='offmodal = !offmodal'>% Off target</th>
                <th @click='trcmodal = !trcmodal'>Total Read Count</th>
            </tr>   
        </table>

        <div id='gc' v-show='gcmodal'></div>
        <div id='at' v-show='atmodal'></div>
        <div id='dup' v-show='dupmodal'></div>
        <div id='off' v-show='offmodal'></div>
        <div id='trc' v-show='trcmodal'></div>
    </div>
    </body>
    <script>


    new Vue({
    el: "#app",
        data: {
            gcmodal:false,
            atmodal:false,
            dupmodal:false,
            offmodal:false,
            trcmodal:false,
        }
    })

    $(document).ready(function(){
        $('#gc').load('./gc_dropout.html'),
        $('#at').load('./at_dropout.html'),
        $('#dup').load('./duplicates.html'),
        $('#off').load('./off_target.html'),
        $('#trc').load('./total_read_count.html')
    })
    </script>
</body>

标签： javascriptjquery

解决方案

使用 HTML iframe元素。

它的主要属性是：-

宽度 （嵌入页面的宽度）

height （嵌入页面的高度）

标题 （嵌入页面的标题）

src （您要嵌入的页面的链接）

<body>
  <div id="app">
    <table width="70%" align="center">
      <tr>
        <th>Sample id</th>
        <th @click='gcmodal = !gcmodal'>GC Dropout</th>
        <th @click='atmodal = !atmodal'>AT Dropout</th>
        <th @click='dupmodal = !dupmodal'>% Duplicates</th>
        <th @click='offmodal = !offmodal'>% Off target</th>
        <th @click='trcmodal = !trcmodal'>Total Read Count</th>
      </tr>
    </table>

    <div id='gc' v-show='gcmodal'>
      <iframe id="gcTable" width="300" height="300" title="gc dropout" src="./gc_dropout.html" />
    </div>
    <div id='at' v-show='atmodal'>
      <iframe id="atTable" width="300" height="300" title="at dropout" src="./at_dropout.html" />
    </div>
    <div id='dup' v-show='dupmodal'>
      <iframe id="duplicatesTable" width="300" height="300" title="duplicates" src="./duplicates.html" />
    </div>
    <div id='off' v-show='offmodal'>
      <iframe id="offTable" width="300" height="300" title="off target" src="./off_target.html" />
    </div>
    <div id='trc' v-show='trcmodal'>
    <iframe id="trcTable" width="300" height="300" title="total read count" src="./total_read_count.html" />
    </div>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data: {
      gcmodal: false,
      atmodal: false,
      dupmodal: false,
      offmodal: false,
      trcmodal: false,
    }
  })
</script>
</body>

推荐阅读