使用 innerHTML 重新加载页面的中心窗格

Posted 2023-05-07

【中文标题】使用 innerHTML 重新加载页面的中心窗格

【英文标题】：Use innerHTML to reload the center pane of the page

【发布时间】：2012-06-10 20:29:01

【问题描述】：

我想使用下面的方法来更新页面的中心窗格，而不是使用 iframe。

我想在以下方面获得一些帮助。 如果我想将另一个 html 页面加载到中心窗格中，它的正确语法是什么？

document.getElementById( 'centerPane' ).innerHTML.??? = 'SampleHTML.htm' ;

innerHTML 之后我需要获取什么属性？

或者我应该使用其他调用来完成。

【问题讨论】：

这里需要 AJAX。试试 jQuery 的 AJAX 调用。

【参考方案1】：

如果您没有使用 jQuery 或其他内置 ajax 方法的库：

var setHtml = function (element, url) 

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () 
        if (xhr.readyState == 4 && xhr.status == 200) 
            element.innerHTML = xhr.responseText;
        
    ;

    xhr.timeout = 10000;
    xhr.open('GET', url, true);
    xhr.send();
;

然后像这样简单地调用 setHtml 函数：

setHtml(document.getElementById('centerPane'), 'SampleHTML.htm');

【讨论】：

语法错误。应该是setHtml(document.getElementById('centerPane'), 'SampleHTML.htm');

Google 调试器显示“未捕获的类型错误：无法将属性 'innerHTML' 设置为 null（重复 2 次）。”在这一行“element.innerHTML = xhr.responseText;”之后出现错误函数 UpdateCenterPane(dest) var setHtml = function(element, url) var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() if (xhr.readyState == 4 && xhr.status == 200) element.innerHTML = xhr.responseText; ; xhr.timeout = 10000; xhr.open('GET', url, true); xhr.send(); ; setHtml(dojo.byId('centerPane'),dest);

这是因为元素为空。检查 dojo.byId('centerPane') 并确保它返回一个元素而不是 null。

【参考方案2】：

如果你有机会使用 jQuery，它可以很简单：

$('#centerPage').load('SampleHTML.htm');

【讨论】：

我希望他使用 jQuery，否则他可能不得不手动拼凑一个 XHR 对象。

感谢所有快速响应...我没有使用 jQuery。我正在使用 html/dojo。中心窗格中的数据通过 dojox.grid.DataGrid 呈现。还有什么建议吗？再次感谢..

【参考方案3】：

您必须使用 ajax 来执行此操作。示例：http://jsfiddle.net/wGw9X/1/

您也可以（应该）使用 jQuery 来简化它并使其更适合跨浏览器编译。在 jquery 中它只是一行代码。

编辑：更新 jsfiddle 链接以使用更好的示例加载文件。

【讨论】：

感谢所有快速响应...我没有使用 jQuery。我正在使用 html/dojo。中心窗格中的数据通过 dojox.grid.DataGrid 呈现。我使用 dojox.data.JsonRestStore 来获取数据，然后用 DataGrid 渲染它。我如何通过 jQuery 做到这一点？还有什么建议吗？再次感谢。