带有对象数据的jQuery.html只显示一个div

带有对象数据的jQuery.html只显示一个div,jquery,html,css,Jquery,Html,Css,我目前正在研究将另一个页面的内容加载到我的页面中的方法。 我想要的是,内容本身从另一个页面的一个div加载到我页面的一个特定div中 到目前为止,它正在将另一个页面的内容加载到我的div中。 我还了解了如何在页面的div中显示另一页面的特定div jsfiddle: jQuery: <script> jQuery(document).ready(function() { jQuery("#region").html('<object data="http://de.

我目前正在研究将另一个页面的内容加载到我的页面中的方法。 我想要的是,内容本身从另一个页面的一个div加载到我页面的一个特定div中

到目前为止,它正在将另一个页面的内容加载到我的div中。 我还了解了如何在页面的div中显示另一页面的特定div

jsfiddle:

jQuery:

<script>
jQuery(document).ready(function() {  
    jQuery("#region").html('<object data="http://de.selfhtml.org/#wiki">');
});
</script>

jQuery(文档).ready(函数(){
jQuery(“#region”).html(“”);
});
HTML:


我现在的问题是,另一个页面的全部内容都加载到了我的div中。
#divname
只跳转到想要的div。但其他页面的其余部分也会被加载。如果您使用滚动条,您可以看到整个内容都在那里


是否只加载div的内容而不加载其他页面的全部内容?我的第二个问题是,我如何给我页面上的div一个大小?正如你在小提琴上看到的,我已经试着给我的提琴定了一个高度和宽度。但它只会更改div的大小,而不会更改内容框的大小。

如果没有实际的HTML,则必须对选择器进行一些更改,但load可以与选择器一起使用,以提取加载页面的一部分,如下所示:

jQuery(function ($) {
    $("#content").load("http://de.selfhtml.org/", "#wiki");
});

注:

  • jQuery(function($){
    既是一个快捷的DOM就绪处理程序,又为较短的代码提供了一个本地范围的
    $
  • 由于网站上的跨域访问限制,代码将不会在JSFIDLE中运行(您将在控制台中看到错误)

这是在sencha中完成的,我没有得到整个网页,但我只得到div对我来说是必需的。我通过正则表达式完成了这项工作。url是

Ext.Ajax.request({
url:url,
参数:{
身份证号码:1
},
成功:功能(响应){
//Ext.getCmp('allnavigation').items.items[1].setMasked(true);
var text=response.responseText;
var html=text.match(/.*/);
var active=Ext.getCmp('allnavigation').setActiveItem(1);
Ext.Viewport.setActiveItem(活动);
var con=Ext.getCmp('desccontainer');
var tpl=[''//
''+标题+''//
'', //
''+html+''//
“+pubdate+”//
'')。加入('');
con.setHtml(tpl)
}
});

$.load
您还可以指定一个选择器,以仅提取加载内容的一部分。您需要显示其余的代码。重新调整大小,再次需要显示加载的内容,因为它可能与适当的CSS样式一样简单。感谢您的回复。没有真正的其他代码。我想做的是加载wiki从selfhtml框到我的页面的div中,周围没有任何其他代码(内容)。并且大小合适。我希望整个框不仅仅是它的一小部分。就像Fiddle中显示的那样,我假设wiki页面在你的域中,或者至少在你的控制下(为了让你加载其中的任何部分)?你想要的是页面的哪一部分(请具体说明该元素)因为您提供的链接()似乎不是正确的页面。我得到了一个有点内容的页面(还没有完成)。在我的页面上,我想放置一个div,该div应该在selfhtml页面上显示灰色框。灰色框得到了代码
。这就是我使用URL
http://de.selfhtml.org/#wiki
但我只想在我的页面上显示那个灰色框。而不是整个页面,因为它现在是第一部分。请尝试
加载
。第二部分,可以吗你请解释一下它应该是什么样子,因为你的CSS似乎在做你要求它做的事情。非常感谢。我怎么能如此盲目地用
.load
自己获取它。你是对的。我没有使用selfhtml是因为跨域策略。我必须尝试另一种方法。但是
.load
修复了另一个问题我在将自己页面的内容加载到自己的另一个页面时遇到了问题(因此没有任何跨域),我只是无法让选择器工作。仍然加载我的整个页面。解决了这个问题。选择器没有使用“#divname”)操作,只是使用了一个空格和#divname。现在一切都正常了。感谢您对TrueBlueAusie的帮助
jQuery(function ($) {
    $("#content").load("http://de.selfhtml.org/", "#wiki");
});
    Ext.Ajax.request({
                url : url,
                params : {
                    id : 1
                },
                success : function(response) {
                    //Ext.getCmp('allnavigation').items.items[1].setMasked(true);                                           
                    var text = response.responseText;                       
                    var html = text.match(/<article>.*<p>/);
                    var active = Ext.getCmp('allnavigation').setActiveItem(1);
                    Ext.Viewport.setActiveItem(active);
                    var con = Ext.getCmp('desccontainer');
                    var tpl = ['<div class="contact">', //
                    '<div id="contcontents" style="font-size: 1.1em;color: #000;font-weight: normal;margin-bottom: 10px;padding-top: 20px;padding-left: 30px;">' + title + '</div>', //
                    '<div style = "text-align:center"><img src="' + image + '" alt = "No-Image" style="width:300px;height:340px" ></div>', //
                    '<div id="contcontents" style="">' + html + '</div>', //
                    '<div style="font-size: x-small;padding-top: 10px;">' + pubdate + '</div>', //
                    '</div>'].join('');
                    con.setHtml(tpl)                        
                }
            });