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?
As was alluded to in comments, jQuery could be injected into the frame as long as the frame is on the same domain.
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.
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);
});
});
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).