将外部html加载到div中-页面加载然后变为空白 [英] Load external html into a div - page loads then goes blank

问题描述

我敢肯定这将是一件愚蠢的事情，但是由于我是一个JavaScript新手，所以可以解决了.

I'm sure this is going to turn out to be a stupid thing but here goes since I'm a JavaScript noob.

我正在尝试将外部html的内容加载到索引页面中，因此在我的index.html中，我有一个要加载html的div:

I'm trying to load the contents of an external html into my index page, so in my index.html I have this div into which I want to load the html:

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

这是我要加载的2-0.html的内容，它在浏览器中自行加载，我有3个此控件(官方的twitter小部件):

And here are the contents of 2-0.html that I'm trying to load, it loads on itself in a browser, I have 3 of this control (the official twitter widget):

<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中.有人可以帮忙吗?

But I can't get it to load into my div on the index.html page. Can anyone help?

我尝试修改div并在加载div之后放置脚本

I tried to modify the div and put the script AFTER the div has been loaded

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


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

，然后将这两个文件放在同一文件夹下，现在发生的是，页面加载了，我可以看到它几秒钟，然后一切都变空白，并且出现空白的白色屏幕.我试图查看页面源代码，可以看到div元素，并且它们为空，其他所有方法都相同

and I put the two files under the same folder, now what happens is, the page loads, I can see it for a couple of seconds, then everything goes blank and I'm presented with a blank white screen. I tried to view page source, I can see the div elements, and they are empty, and everything else is the same exact way

我将.load函数放入$(document).ready函数中，现在，当页面加载时，外部html完全替换了我的index.html

I put the .load function in the $(document).ready function, now when the page loads, the external html replaces my index.html completely

推荐答案

您的脚本在 #topdiv 存在之前就已执行.您应该将其放在< div> 之后，或仅使用处理程序:

Your script is executing before #topdiv exists. You should either put it after the <div> or just use a handler:

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

这篇关于将外部html加载到div中-页面加载然后变为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！