动态加载的函数可以完成编写动态加载它们的页面

时间:2014-10-22 19:38:15

标签: javascript

请帮助。

问题:我可以动态加载JS文件(/scripts/banner.js),然后使用其中一个函数 - writeBanner(document,t1,t2,t3) - 来完成页面的编写吗?

我一直读到我的眼睛流血,但是:

- 我发现的每个例子都假定读者会在页面呈现后调用一个函数,并且

- 每个例子都假设阻止是坏的。

不幸的是:

- 我需要调用这些函数才能完成加载它们的页面的编写,并且

- 阻止不是问题。该应用程序部署为EAR文件,因此此后不需要从其他任何地方下载JS文件。

为什么要这样做?

初始窗口(" TAPP")从6个JS文件中加载了十几个函数。所有页面都使用它们在页面的body元素中编写HTML,该元素显示一致的横幅,最多包含3个参数化的标题行。

1级页面:这些页面在初始(" TAPP")窗口中相互打开。它已经加载了所有功能 - 效果很好。

Level-2页面:这些页面在由1级页面打开的弹出窗口中打开。他们使用" this.opener",即" TAPP"称这些功能 - 完美地运作。

现在我希望能够打开Level-2页面

- 作为第2级页面的弹出窗口,AND

- 作为独立页面。

注意:所有level-2 pages.jsp包括写入HEAD元素:

<%@ include file='/jsp-pages/level-2/headers/beg.jsp' %>

这样我只需要在一个地方同时处理所有这些脚本。

第一步:我将此代码添加到beg.jsp:

<script language="javascript">
  var SH = "";
  if (this.opener && this.opener.name == "TAPP") {
    SH = this.opener; // TAPP has all required functions
  } else {
    //Dynamically add the required <script> elements
    /************************************/
    // see code I tried below
   /************************************/
   SH = this; // "this" now has all the functions TAPP has
   //        alert ("Opener is NOT TAPP: " + SH);
  }
  // All pages can now call SH.writeBanner(document, t1,t2, t3) with their own titles
</script>

这就是问题所在。当取消注释上面的alert()函数时,BOTH尝试(下面的DOM和document.write())完美地工作。当它被注释掉时,打开2级页面,因为弹出窗口工作完美但是当打开时,自由站立的页面不会写出他们的标题。显然,它们是在加载脚本之前呈现的。

迄今为止我的尝试:

- 放弃!跳过上面的代码。硬编码&#34; /jsp-pages/level-2/headers/beg.jsp"中的六个附加标签;每次打开任何二级页面时都会重新加载六个JS文件中的函数。无论哪种方式。

丑陋,不优雅,多余,如果页面作为弹出窗口打开则浪费,不惜一切代价避免。

- 当TAPP不是this.opener时,使用DOM通过在

末尾添加脚本元素来加载JS文件
<script type="text/javascript"> 
  function   dynamicload(){
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.setAttribute("type","text/javascript");
    script.setAttribute("src", "/scripts/banner.js");
    script.async = false;   // halt rendering until writeBanner() is loaded?
    head.appendChild(script);
    //alert ("DL Done");
  }
  dynamicload();
</script> 

- 当TAPP不是this.opener时,使用document.write()编写六个脚本。

<script type="text/javascript"> 
  document.write('<SCR'+'IPT src="/scripts/banner.js '><\/SCR'+'IPT>');
  // and six more like it
</script> 

所以帮助!

是否真的不可能使用动态加载的函数来完成动态加载它们的页面的编写? GLB

2 个答案:

答案 0 :(得分:0)

您可以使用动态加载的代码将内容添加到当前页面。但是,您无法使用document.write()这样做。您必须使用.appendChild().insertBefore()或在现有DOM元素上设置.innerHTML等方法将DOM元素直接添加到页面中。

document.write()的问题在于,一旦页面被加载(因此文档流关闭),以后对document.write()的任何调用都将清除当前页面并开始写入新的空白页面一般会破坏你想要做的事情的页面。

并且,当您动态加载代码时,它将在当前文档加载完毕后加载。

document.write()用于在文档处于加载过程中时在文档流中的当前位置插入内容,该内容仅在脚本作为<script>原始HTML中存在时才有效标记或它可用于全新的文档(例如创建新的iframe或新的window)。

答案 1 :(得分:0)

简单的回答。你不能。

页面无法加载JS文件,其中包含编写页面其余部分所需的函数。

无论您如何编写加载JS文件的脚本 - 使用DOM添加脚本元素,或者使用document.write()编写它 - JS文件最终会在页面加载后加载迟到写的页面。 (见无讨论的讨论。)

然而,如果我在我的脚本中抛出一个alert(),两个条件方法都可以工作 - DOM和document.write() - 我就有了头衔!我能想到的只是警报导致页面重新呈现自身,并且由于在加载页面后调用警报,因此加载了JS文件。

感谢所有人的帮助

AFTERTHOUGHT:我梦见打开一个带有iFrame的空白页面来加载我的2级可能会有效。如果是这样我会回来。如果不是......我放弃了。