如何在框架内加载 jQuery？

Question

我正在开发一个遗留企业应用程序，其代码是在 2001 年使用 JavaScript、HTML、Intersystems Caché 和 Caché Weblink 的组合编写的。

这是 index.html 网络应用程序中存在的内容：

<HTML>
<HEAD>
</HEAD>

<FRAMESET ROWS="32,*" FRAMEBORDER="no" border="0" framespacing="0">
  <FRAME
        SRC="sysnav.html"
        NAME="sysnav"
        SCROLLING="no"
        MARGINHEIGHT="10"
        MARGINWIDTH="10"
        NORESIZE>
  <FRAME
        SRC="cgi-bin/nph-mgwcgi?MGWLPN=dev&wlapp=SYSTEM&SystemAction=DisplayContentFrame"
        NAME="content"
        SCROLLING="auto"
        MARGINHEIGHT="0"
        MARGINWIDTH="10">
</FRAMESET>
<noframes>

</noframes>

</HTML>

我遇到的问题是，在 content 框架中，该框架的 HTML 每次都会自动生成，但我需要在框架中包含 jQuery .

有什么hack/workaround我可以把jQuery推到content框架里吗？

Answer 1

否，但您可以创建一个新页面并将其包含在 src 中。是的，它很丑陋，但在某些情况下它可以工作。在新页面中包含jquery，在新页面中包含旧页面。

Answer 2

正如评论中提到的，只要框架在同一域中，jQuery 就可以注入到框架中。

原版Javascript

可以将如下所示的脚本标记添加到 index.html 的 <head> 元素中。它会一直等到通过 addEventListener() and then dynamically adds a <script> tag with the src attribute pointing to the jQuery code hosted by the Google Hosted Libraries.

加载内容框架

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    frames['content'].addEventListener('load', function() {
        var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
        var newScriptTag = document.createElement('script');
        newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
        contentFrameHead.appendChild(newScriptTag);
      });
});
</script>

参见 this plunker example 中的演示。尝试单击标记为 Test jQuery Loaded in this frame? 的按钮，然后在注释 [=35 的第 10 行时查看结果如何变化=]index.html.

在index.html

中利用jQuery

也许开销太大，但是如果在index.html中添加jQuery，可以使用jQuery辅助函数。我试图利用这些来缩短代码，但运行在尝试使用 $() - refer to this answer 创建脚本标签时遇到了问题，以详细解释为什么这不起作用。

所以利用 jQuery 辅助函数的代码并没有短多少...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
$(function() { //DOM-ready
  $(frames['content']).on('load', function() { //load for content frame
    var newScriptTag = document.createElement('script');
    newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
    var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
    contentFrameHead.appendChild(newScriptTag);
  });
});

如果内容框架有不同的域

否则，如果内容框架的域与 index.html 的域不同，则服务器端脚本（例如使用 PHP 与 cURL、nodeJS 等）可能需要获取该页面的内容并包含 jQuery 库（它本身可能很麻烦）。

如何在框架内加载 jQuery？

How to load jQuery inside frame?

html

javascript

jquery

frameset

html-frames

原版Javascript

在index.html

如果内容框架有不同的域