Question

我正在开发一个遗留企业应用程序，其代码是在2001年使用JavaScript，HTML，IntersystemsCaché和CachéWeblink的组合编写的。

这是网络应用的index.html中存在的内容：

<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注入到帧中。

Vanilla Javascript

如下所示的脚本标记可以添加到 index.html 的<script>元素中。它等待内容框架通过addEventListener()加载，然后动态添加<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>标记，其中 src 属性指向Google Hosted Libraries托管的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);
  });
});

见this plunker example中演示的内容。尝试点击 在此框架中加载测试jQuery？ 的按钮，看看在评论 index.html 的第10行时结果如何变化。

在index.html中使用jQuery

可能会有太多开销，但如果将jQuery添加到 index.html ，则可以使用jQuery帮助程序函数。我尝试利用这些来缩短代码，但在尝试使用$()创建脚本代码时遇到了问题 - 请参阅this answer以获取有关无效的原因的详细说明。

所以使用jQuery辅助函数的代码并不短得多......

public function update(PostRequest $request, $id)
{
    $post = Post::find($id);

    $post->update($request->all());

    if ($request->tags) {
        $tagNames = explode(',', $request->tags);
        $tagIds = [];

        foreach ($tagNames as $tagName) {
            $tagCount = Tag::where('name', '=', $tagName)->count();
            if ($tagCount < 1) {
                $tag = $post->tags()->create(['name' => $tagName]);
            } else {
                $post->tags()->detach();
                $tag = Tag::where('name', $tagName)->first();
            }
            $tagIds[] = $tag->id;
        }
        $post->tags()->sync($tagIds);
    }

    return back()->with('success', 'Successfully');
}

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

否则，如果内容框架的域与 index.html 的域不同，那么服务器端脚本（例如，使用带有cURL的PHP，nodeJS等）可能是需要获取该页面的内容并包含jQuery库（它本身可能很麻烦）。

Answer 2

不，但您可以创建一个新页面并将其包含在src中。是的，它很难看，但在某些情况下它可能会起作用。在新页面中包含jquery，并在新页面中包含旧页面。

如何在框架内加载jQuery？

2 个答案:

Vanilla Javascript

在index.html中使用jQuery

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