How to load jQuery inside frame?

问题

I am working on a legacy enterprise application whose code was written in 2001 using a combination of JavaScript, HTML, Intersystems Caché, and Caché Weblink.

This is what exists in index.html for the web app:

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

The problem that I have is that in the content frame, the HTML for that frame is automatically generated every single time, but I need to include jQuery in the frame.

Is there any hack/workaround I can do to shove jQuery into the content frame?

回答1:

As was alluded to in comments, jQuery could be injected into the frame as long as the frame is on the same domain.

Vanilla Javascript

A script tag like the one below could be added to the <head> element of index.html. It waits until the content frame has been loaded via 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>

See it demonstrated in this plunker example. Try clicking the button labeled Test jQuery Loaded in this frame? and see how the result changes when commenting line 10 of index.html.

Utilizing jQuery in index.html

Maybe it would be too much overhead, but if jQuery was added to index.html, jQuery helper functions could be used. I attempted to utilize those to shorten the code but ran into an issue while attempting to create the script tag using $() - refer to this answer for a detailed explanation of why that won't work.

So the code utilizing jQuery helper functions isn't much shorter...

<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);
  });
});

If content frame has a different domain

Otherwise, if the domain of the content frame is a different domain than that of index.html, then a server-side script (e.g. using PHP with cURL, nodeJS, etc.) might be necessary to fetch the content of that page and include the jQuery library (which itself might be cumbersome).

回答2:

No, but you can create a new page and include that in the src. Yes it is ugly, but it could work in some cases. include jquery in the new page, and include the old page in the new page.

来源：https://stackoverflow.com/questions/45765557/how-to-load-jquery-inside-frame

标签

javascript

jquery

html

frameset

html-frames