Iframe 的 Javascript 替代品？答案

【问题标题】：Javascript Alternative to Iframe?Iframe 的 Javascript 替代品？
【发布时间】：2014-10-31 06:23:56
【问题描述】：

我是一个在线角色扮演游戏的管理员，我们最近从某种 Frankencode 过渡到了 javascript。虽然我已经掌握了基础知识，但我遇到了一个不知道如何解决的问题。

我们在游戏中有宏，您可以在其中移动多个房间，方法是输入带有空格、分号和方向之间的另一个空格的方向。我创建了一个包含一长串宏的图集，以帮助游戏玩家更快、更有效地移动。我的主要问题是，一切都可以使用 Frankencode，但 Javascript 无法识别我的新代码中的 iframe。

我真的很想要一个 iframe 的替代方案，我不必依赖外部网站来编写这个脚本，但是我进入这个充满希望的思路的旅程导致了一堆鲜红的、愤怒的错误和命令打破。我用 iframe 替换了 contentedtable，但游戏没有它！

下面是我的代码。请记住，除了 iframe 之外，一切都可以正常工作。

提前致谢！ :)

var macaroni = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
var macaroons = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";

function command(person, totalcommand) {
if (person.isAttribute("macaroons"))
{
person.personal(macaroons);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
person.personal(macaroni);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}

【问题讨论】：

实际问题是什么？您说这与 iframe 有关，并且为 iframe 显示了一些 HTML，但您并没有真正解释 javascript 问题是什么。你是什么意思“javascript无法识别iframe”？

标签： javascript iframe

【解决方案1】：

iframe 的替代方案是 AJAX（异步 Javascript 和 XML），它允许您从服务器加载页面和数据，您可以处理结果并将响应插入回您的页面。

学习 Javascript 的最佳页面来自 Mozilla 开发者网络，this link 尤其可以帮助您了解有关 ajax 的更多信息。

但是，您可以下载一些库，例如 jQuery，它们有助于简化许多任务，包括加载和存储 html 等等。

如果您需要存储网站，您可以执行以下操作：

在 HEAD 中包含 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

用你想要的任何 id（应该是唯一的）创建一个 div（或其他用于存储的容器）：

<div id="loadingArea"></div>

在页面末尾或头部末尾包含一个脚本，以确保 jQuery 已加载

<script>
   $(document).ready( //Will run the following function when the html document is ready
        function() {
           var url = "http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm"; //Load the page you want.
           var portion = "body >" //select the portion of the page you need to eliminate duplicate html, head, and body tags
                                  //This is a jQuery selector similar to css meaning select all children (>) of body

           //Here we tell jQuery to select the element with id(#) loadingArea and load the
           //portion of the url.
           $('#loadingArea').load(url+" "+portion);
        }
   ); //End of ready call
</script>

【讨论】：