我有一个HTML页面,其中包含一个表格和一个dhtmlxgantt图表。下面的javascript函数有效,但是现在我想从其他HTML加载甘特图,并通过iframe显示它。

如何从content_id表中获取main_page.html并将其填充在scheduler.html甘特图上

非常感谢大家的帮助

main_page.html

<table id="project-content-datatable">
    <tbody>
        <tr>
            <td class="project_content_id">1</td>
            <td class="project_content_id">2</td>
            <td class="project_content_id">3</td>
        </tr>
    </tbody>
</table>

<div class="col-md-12" style="padding: 3px; margin: 0px;">
     <iframe src="/dashboard/projects/scheduler.html" height="330"; width="99%" style="border:2px  solid blue; border-radius: 5px;"></iframe>
</div>


scheduler.html

<div id="my_scheduler" style='width:1567px; height:325px;'></div>


javascript

$('#project-content-datatable').on('click', 'tr', function () {
    var content_id =$(this).closest('tr').children('td.project_content_id').text();
    initializeGantt(content_id)
    });

    gantt.config.xml_date = "%Y-%m-%d";
    function initializeGantt(content_id) {
        scheduler = gantt.init("my_scheduler", new Date('2017, 01, 01'), new Date('2017, 12, 31'));
        $.get("/dashboard/ganttchart_list/"+content_id+"/?format=json", function(result) { gantt.parse(prepareData(result)); });
    }

    initializeGantt();

最佳答案

一种简单的方法是调用动态创建传递给iframe的网址:

<div class="col-md-12" style="padding: 3px; margin: 0px;">
    <iframe id="iframe" height="330"; width="99%" style="border:2px  solid blue; border-radius: 5px;"></iframe>
</div>


并在您的脚本中:

var url = "/dashboard/projects/scheduler.html?content_id=" + content_id;
document.getElementById('iframe').src = url;


现在,在iframe中,您可以从window.hash获取内容ID。在这种特定情况下,可以很容易地使用子字符串来提取id,但是对于更完整的方法,您可以使用一个函数,该函数从url中提取查询参数,如下所述:How can I get query string values in JavaScript?

10-05 20:25
查看更多