我有一个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?