Question

在javascript事件监听器触发后，我想要将几个非基本内容插入到几个不同的页面上（作为一系列操作的一部分）。

第1页显示非必要内容A
第2页显示Nothing
第3页显示非必要内容B
第4页显示非必要内容B
第5页显示非必要内容C

＆＃34;插入＆＃34;的所有其他尺寸是相同的 - 所有元素的脚本行为是相同的，所有元素的CSS样式都是相同的 - 只有HTML标记结构和内容不同。

我的问题是： 如何最好地插入非必要内容？

可能的服务器端方法：

通过服务器端语言在文档中包含内容。稍后通过将CSS从display: none更改为display: block来显示内容。
不要在文档中包含内容，但在需要时使用 Ajax 从服务器获取内容。

可能的客户端方法：

使用document.write('')（ Bleagghhh！）
使用<iframe>（真的吗？）
异步加载javascript字符串并使用.innerHTML
异步加载并解析javascript对象{}并使用document.createElement()，setAttribute()，document.createTextNode，.textContent，.appendchild()

我觉得使用.innerHTML（客户端：3）有点脏（与客户端：4相比），但我已经使用客户端：3无论如何：

非必要内容

var nonEssentialContent = '';
nonEssentialContent += '<h2>Roses are Red...</h2>';
nonEssentialContent += '<p>Roses are red,<br />';
nonEssentialContent += 'Violets are blue,<br />';
nonEssentialContent += 'Client-Side Includes are new to me,<br />';
nonEssentialContent += '<span class="last-line">How about you?</span></p>';

异步加载非基本内容

var nonEssentialContentScript = document.createElement('script');

function loadMainEvent() {

    [... CODE HERE...]

    containerDiv.innerHTML = nonEssentialContent;

    [... CODE HERE...]

}

function loadNonEssentialContent() {
    nonEssentialContentScript.setAttribute('src', '/path/to/non-essential-content.js');
    document.body.appendChild(nonEssentialContentScript);
    nonEssentialContentScript.addEventListener('load', loadMainEvent, false);
}

loadNonEssentialContent();

我的唠叨感是，因为我是自学成才，我可能会错过构建客户端包含的非常明显（优越）的方法。

我还担心，即使上述方法适用于生产环境，它也可能包含 gotcha ，但我没有想到。

那么，上面的问题再次...... 如何最好地插入非必要内容？

为非必要内容构建异步客户端包含

0 个答案: