How to load jQuery inside frame?

Question

How to load jQuery inside frame?

1.3k Views Asked by homersimpson At 18 August 2017 at 22:01

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?

Original Q&A

There are 2 best solutions below

Mels_D On 18 August 2017 at 23:03

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.

**Sᴀᴍ Onᴇᴌᴀ** · Accepted Answer · 2017-08-19T07:02:15.477000

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

How to load jQuery inside frame?

There are 2 best solutions below

Vanilla Javascript

Utilizing jQuery in index.html

If content frame has a different domain

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in FRAMESET

Related Questions in HTML-FRAMES

Trending Questions

Popular # Hahtags

Popular Questions