如何在框架內加載jQuery？

Question

我正在研究一個遺留的企業應用程序，其代碼是在2001年使用JavaScript，HTML，IntersystemsCaché和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框架中？

Answer 1

正如評論中提到的那樣，只要幀在同一個域上，就可以將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>

請參閱此plunker示例中演示的內容。 嘗試單擊此框架中標記為Test jQuery Loaded的按鈕？ 並在評論index.html的第10行時查看結果如何變化。

在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() { //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的域不同，則可能需要服務器端腳本（例如，使用帶有cURL的PHP，nodeJS等）來獲取該頁面的內容並包含jQuery庫（它本身可能很麻煩）。

Answer 2

不，但您可以創建一個新頁面並將其包含在src中。 是的，它很難看，但在某些情況下它可能會起作用。 在新頁面中包含jquery，並在新頁面中包含舊頁面。

如何在框架內加載jQuery？

問題描述

2 個解決方案

解決方案1
4 已采納 2017-08-19 07:02:15

香草Javascript

在index.html中使用jQuery

如果內容框架具有不同的域

解決方案2
2 2017-08-18 23:03:04

如何在框架內加載jQuery？

問題描述

2 個解決方案

解決方案1 4 已采納 2017-08-19 07:02:15

香草Javascript

在index.html中使用jQuery

如果內容框架具有不同的域

解決方案2 2 2017-08-18 23:03:04

解決方案1
4 已采納 2017-08-19 07:02:15

解決方案2
2 2017-08-18 23:03:04