Question

我使用jQuery将页面加载到div中 - 而不是使用iframe。

代码效果很好（可以随意重复使用！）但是，我有一个问题，当有人访问URL时我无法显示页面。

因此，在页面加载时，画布为空（菜单旁边），直到访问者点击链接。

这是代码

<script>

  $('[data-target]').click( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
</script>

每当访问该页面时，我想要显示的是page-a.html，因此该页面看起来不是那么空白。

有没有人有任何想法？

非常感谢先进:)

丹

Answer 1

使用jQuery .load（）

简单的解决方案是使用已经为您执行此操作的jQuery方法：jQuery .load()

然后，在jQuery文档就绪函数中，您将加载一个默认页面或只使用页面中找到的第一个href，如下所示：

$（“＃halloffame”）。load（$（“a”）[0] .href，“。partner_body”）;

运行代码段以查看演示

（Yahoo YQL用于规避演示中的跨域问题）

$('a').click(function(e) {
  $('#halloffame').load( e.target.href );
  e.preventDefault();
});

$('#halloffame').load( $('a')[0].href );

#halloffame {border:1px steelblue solid; margin: 5px;padding:0.5em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Click to load:
<a href="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FStack_Overflow%22%20">[ Stack Overflow ]</a>
<a href="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSpaghetti_code%22%20">[ Spaghetti Code ]</a>
<div>HTML:<div>
<div id="halloffame"></div>

Answer 2

要解决此问题，您可以使用jQuery的ready函数。您可以查看以下链接：https://api.jquery.com/ready/

以下是演示如何执行此操作的演示。

<script>
  $( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
</script>

Answer 3

所以我设法通过使用@ Roberto的建议和我的原始代码（简单地将负载添加到最后）来解决这个问题。

这是完成的代码，它在页面加载时加载URL（并且仍允许您在div中打开链接）

  $('[data-target]').click( function (e) {
    $.get($(this).attr('href'), function(data){ 
     $('#halloffame').empty(); 
      $(data).find(".partner_body").appendTo("#halloffame");

    });
    e.preventDefault(); // prevent anchor from changing window.location
  }); 
  $.get( "pages/accounting-software/", function( data ) { 
       $('#halloffame').empty(); 
        $(data).find(".partner_body").appendTo("#halloffame");

   });

希望这有助于其他任何人尝试获得相同的结果。

如何在页面加载时默认显示页面

3 个答案:

使用jQuery .load（）