Question

我确信这会变成一个愚蠢的事情，但这是因为我是一个JavaScript菜鸟。

我正在尝试将外部html的内容加载到我的索引页面中，所以在我的index.html中我有这个div我要加载html：

<div id="topdiv">
</div><script>
        $('#topdiv').load("/widgets/2-0.html");
</script>`

以下是我正在尝试加载的2-0.html的内容，它在浏览器中加载，我有3个这个控件（官方的推特小部件）：

<div style="float:right; margin:5px;">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
        new TWTR.Widget({  version: 2,  type: 'search',  search: '#abbaseya',  interval: 15000,  subject: 'widget',  width: 300,  height: 360,
        theme: {    shell: {      background: '#8ec1da',      color: '#ffffff'    },
        tweets: {      background: '#ffffff',      color: '#444444',      links: '#1985b5'    }  },
        features: {    scrollbar: true,    loop: true,    live: true,    behavior: 'default'  }
        }).render().start();
    </script>
</div>

但是我无法在index.html页面上加载到我的div中。有人可以帮忙吗？

EDIT1：我试图修改div并在div加载后放置脚本

<div id="topdiv" style="height:500px;width:100%;">


        </div>
        <script>$('#topdiv').load("/widgets/2-0.html");</script>

然后我将这两个文件放在同一个文件夹下，现在发生了什么，页面加载，我可以看到它几秒钟，然后一切都变成空白，我看到一个空白的白色屏幕。我试图查看页面源代码，我可以看到div元素，它们是空的，其他一切都是完全相同的方式

EDIT2：我把.load函数放在$（document）.ready函数中，现在当页面加载时，外部html完全替换了我的index.html

Answer 1

您的脚本在#topdiv存在之前正在执行。您应该将其放在<div>之后，或者只使用处理程序：

$(document).ready(function() {
    $('#topdiv').load("/widgets/2-0.html");
});

Answer 2

我相信小部件使用document.write（）来呈现自己，这意味着它必须在页面呈现时被调用，即必须在页面加载之前调用它。

在页面加载后调用document.write（）会导致整个页面被重写。

您可能会为窗口小部件本身重写JavaScript，以便它不使用document.write（），但这可能需要一些努力。

如果您有选项，则可以使用服务器端包含而不是尝试使用JavaScript加载外部文件。

将外部html加载到div - 页面加载然后变为空白

2 个答案: