如何在框架内加载jQuery？答案

【问题标题】：How to load jQuery inside frame?如何在框架内加载jQuery？
【发布时间】：2018-01-27 15:59:09
【问题描述】：

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

这就是 index.html 中存在的 web 应用程序：

<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。

我可以做任何破解/解决方法来将 jQuery 推入 content 框架吗？

【问题讨论】：

没有，除非你可以修改src...
哪个框架？第二个？您有权编辑该脚本吗？从技术上讲，如果页面在同一个域中并且没有达到 cors 限制，您可以将脚本从父页面注入到子页面。但我强烈建议您更改这些页面而不是这样做。
相关：stackoverflow.com/questions/16194398/…
仅当您可以更改框架的 SRC 那么是的...您可以编写一个 php 脚本，该脚本将使用 CURL 从您的 cgi 生成的脚本中获取所有 html，然后插入 JQuery 和/或其他 Javascript然后返回整个 html。
呃，如果是同一个域，你可以注入脚本@NawedKhan 可能会导致调试噩梦，但完全有可能。

标签： javascript jquery html frameset html-frames

【解决方案1】：

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

原版Javascript

可以将如下所示的脚本标记添加到 index.html 的 <head> 元素中。它一直等到通过addEventListener() 加载了内容框架，然后动态添加一个<script> 标记，其src 属性指向Google Hosted Libraries 托管的jQuery 代码。

<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? 的按钮，看看在 index.html 的第 10 行注释时结果如何变化。 p>

在 index.html 中使用 jQuery

也许开销太大，但如果将jQuery添加到index.html中，则可以使用jQuery辅助函数。我试图利用这些来缩短代码，但在尝试使用 $() 创建脚本标签时遇到了问题 - 请参阅 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 库（它本身可能很麻烦）。

【讨论】：

啊，谢谢！我什至没有想过这样的解决方案——但这正是我所需要的。

【解决方案2】：

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

【讨论】：