如何在框架中加载jQuery？ [英] How to load jQuery inside frame?
问题描述
我正在研究一个遗留的企业应用程序，其代码是在2001年使用JavaScript，HTML，IntersystemsCaché和CachéWeblink的组合编写的。
这就是存在于 index.html 的Web应用程序中：
< HTML> ;
< HEAD>
< / HEAD>
< FRAMESET ROWS =32，*FRAMEBORDER =noborder =0framespacing =0>
< FRAME
SRC =sysnav.html
NAME =sysnav
SCROLLING =no
MARGINHEIGHT =10
MARGINWIDTH =10
NORESIZE>
SRC =cgi-bin / nph-mgwcgi？MGWLPN = dev& wlapp = SYSTEM& SystemAction = DisplayContentFrame
NAME =content
SCROLLING = auto
MARGINHEIGHT =0
MARGINWIDTH =10>
< / FRAMESET>
< noframes>
< / noframes>
< / HTML>
我遇到的问题是在内容框架，每一次都会自动生成该框架的HTML，但我需要在框架中包含jQuery。
是否有任何黑客/解决方法可以做将jQuery推入内容框架？
在评论中，只要框架位于同一个域，jQuery就可以注入框架。
Vanilla Javascript
下面的脚本标签可以添加到 index.html 的< head> 元素。它等待内容框架通过 addEventListener（），然后动态地添加 src 属性指向由< script> https://developers.google.com/speed/libraries/rel =nofollow noreferrer>谷歌托管图书馆。
< 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>
见这个笨蛋的例子。尝试点击 这个框架中的jQuery加载的按钮 ，看看如何在注释 index.html的第10行时改变结果。 p>
在index.html中使用jQuery
也许这会造成太多开销，但是如果jQuery被添加到 index.html ，可以使用jQuery帮助函数。我试图利用这些缩短代码，但尝试使用 $创建脚本标记时遇到问题（） - 请参阅此答案，详细解释为什么不起作用。
因此，使用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（）{//加载内容框架
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 域不同，那么服务器端脚本例如使用带cURL，nodeJS等的PHP）可能需要获取该页面的内容并包含jQuery库（本身可能很麻烦）。
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.
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).
这篇关于如何在框架中加载jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
