Question

我正在尝试在用户点击按钮时加载输入网页的缩略图。缩略图在页面上正确生成，但是当我尝试将其加载到div元素中时，它将替换整个页面。目前，这只是一个概念证明。如果可以使用，我将切换到用户输入的URL。

这是我的点击事件代码：

$('#check_url').click(function() {
    $('#thumb_loader').load('load_thumb.html');
});

thumb_loader只是一个div。我也尝试过这样：

$('#check_url').click(function() {
    $('#thumb_loader').html($('<div>').load('load_thumb.html'));
});

这是load_thumb.html：

<div>
    <script type="text/javascript">
        wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
    </script>
</div>

wsr_snashot是WebSnapr。图像在其服务器上生成，并显示在此代码所在的位置。

首先，我甚至可以像这样加载javascript吗？我之前使用过load来删除包含javascript的内容，所以我怀疑是这种情况。

有人在这看到任何问题吗？

编辑：

以下是我希望加载的div表和用户点击以触发AJAX的按钮。

<table>
    <tr>
        <td colspan="2">
                    <div id="thumb_loader"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Link Title:</label>
                </td>
                <td>
                    <label>Link Description:</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="link_title" />
                </td>
                <td rowspan="3">
                    <textarea name="link_description"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Link URL:</label>
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="link_url" />
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    <input id="check_url" type="button" value="Check URL" />
                </td>
                <td align="right">
                    <input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
                </td>
            </tr>
        </table>

我没有看到任何与代码相关的内容。希望这已经足够了。

Answer 1

将JS代码放在load_thumb文件之外，并保存在image.js之类的新js文件中，并使用$.getScript将其动态添加到主页中：

$.getScript('path/image.js', function(){
   // file loaded
});

您应该将上面的代码放在您想要运行拇指图像的主文件中。

更多：

http://api.jquery.com/jQuery.getScript/

Answer 2

jQuery#load()：使用不带后缀选择器表达式的URL调用.load（）时，在删除脚本之前将内容传递给.html（）。这将在丢弃之前执行脚本块。但是，如果使用附加到URL的选择器表达式调用.load（），则在更新DOM之前会删除脚本，因此不会执行脚本。

如果wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');包含任何document.write次来电，则您的整个文档都会被覆盖。确保你知道那个功能是做什么的。

更新

根据问题的评论，这确实是个问题。您需要弄清楚wsr_snapshot()如何以异步方式使用。无论如何，这是什么API？

jQuery load（）替换整个页面而不是将内容加载到div中

2 个答案: