通过 jQuery 加载包含内联脚本的 HTML 内容答案

【问题标题】：Loading HTML content containing inline script via jQuery通过 jQuery 加载包含内联脚本的 HTML 内容
【发布时间】：2009-11-02 02:41:30
【问题描述】：

背景

我使用 Graffiti CMS 为当地的慈善/服务组织运行一个 ASP.NET 站点。
组织的领导希望开始集成第三方后端管理系统，将内容公开为完整的 HTML 页面。
其中一个页面，军官列表，使用内联脚本加载图片或占位符（取决于是否有给定军官的图片）。
我创建了一个服务器端代理，可以使用 jQuery 的 .load() AJAX 函数从这些页面加载内容。
我可以使用 iframe 很好地显示此内容，但感觉真的很笨拙，如果内容的大小发生变化，我可能需要更改 iframe 的大小以确保它全部显示（废话！）。李>

问题

如果我在 Graffiti 帖子中创建 <div>，并使用 $("#divid").load(url) 加载内容，则 HTML 内容加载正常，但内联脚本被删除，因此既不显示官员图像也不显示占位符。

问题

了解问题的原因是 jQuery 几乎可以肯定地试图通过在我将内联脚本加载到我的 DOM 之前删除它来防止潜在的坏东西，有没有办法使用 jQuery 来获取这个 HTML 并将它加载到我的 DOM 将保留脚本，但不会打开主要的安全漏洞？我确实相信我从中加载内容的系统，如果这有影响的话。

建议？我希望让这一切尽可能简单......任何太复杂的事情，我都最好坚持使用 iframe。

提前致谢！

@devhammer

【问题讨论】：

您尝试加载的页面是否在同一个域名上？
内联脚本是指script标签或onclick=someScript？
不，该页面位于不同的域中，但我在我的域中设置了服务器端代理来拉取内容。
内联如下：<script> if ('' == '') { document.write('<img src="/path/member-small.jpg">'); } else { document.write('<img src="/otherpath/" width=80>'); } </script>
脚本出现在标记的中间。

标签： asp.net jquery ajax scripting

【解决方案1】：

使用 document.write 时出现问题。如果您有能力修改源页面，您可以修改它们以使用 innerHtml 技术。

为此，您需要更改如下内容：

<div id="testDiv">
  <script type="text/javascript">
    document.write("<img src='image1.jpg' alt='' />");
  </script>
</div>

到这里：

<div id="testDiv">
<div>
<script type="text/javascript">
  document.getElementByid('testDiv').innerHTML = "<img src='image1.jpg' alt='' />";
</script>

【讨论】：

我可以询问运行这些页面所在系统的人是否可以修改页面，但鉴于有许多其他人使用相同的系统，如果他'我对此持开放态度。重用并非为重用而设计的系统的一些危险的主要示例。

【解决方案2】：

不适合我...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
    </head>
    <body>
        <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var dynamic = 'begin <script type="text/javascript">alert("hello");<\/script> end';
                $('#test').html(dynamic);
            });
        </script>
        <div id="test"></div>
    </body>
</html>

警告框正在显示.. 但是如果您将其替换为 document.write，则 document.write 中不会出现任何内容...您有“开始结束”

希望这会有所帮助！

【讨论】：

对...有道理。脚本在那里，但document.write 不起作用，因为调用它为时已晚。
Yes "必须在页面加载过程中执行 document.write 命令。" -java-programming.suite101.com/article.cfm/…您可以将您的帖子标记为已回答:)

【解决方案3】：

尝试手动设置 HTML，如下所示：

$.get(url, function(htmlText) { $('#divid').html(htmlText); });

我很确定这将执行脚本。

【讨论】：

请注意，页面加载时脚本可能会执行一些页面加载后您无法执行的操作。首先：任何调用document.write 以在页面加载时向页面添加内容的内容都会完全破坏您现有的页面。
有趣的是你应该提到document.write，因为这正是这些脚本正在做的事情。我确实尝试了$.get，并且可以加载内容（和脚本），但脚本不会执行。
这种方式加载HTML的时候，怎么用jQuery抓取你想要的HTML部分呢？ .load 删除了 [html][body] 等，但现在这需要手动完成......有什么想法吗？
@BerggreenDK: $('someSelector', htmlText).html().
@SLaks：嗯，是的——我本来可以更具体的。但我指的是我们如何获取内联脚本然后在 HTML 中执行脚本？