如何在div中加载另一个页面?

时间:2011-10-03 07:17:36

标签: jquery html

我使用循环创建了许多div,然后在其中有一个隐藏字段,其中值是我想要加载div的url。我尝试了load()函数,但结果很慢。就像我使用iframe时一样,加载需要很长时间,因为它的子节点不会扩展高度和宽度。还有其他办法吗?

更新

我的html代码文件名index.html.erb

<div id="surveyDiv" style="overflow-y:auto;" >
  <% @sections.each do |sec| %>
  <% #sec = @sections.first %>
    <br/>
    <% @div_id = "survey_section_" + (sec.id).to_s %>
    <div id="<%=h @div_id %>">
        <img src="/images/loading.gif" id="loadingPic"/>
      <input type=hidden id="hid" name="hid" value="<%=h @srcString + "?section=" + (sec.id).to_s %>"/>
      <!--<iframe id="the_frame" name="the_frame" src="<%#=h @srcString + "?section=" + (sec.id).to_s %>" scrolling="yes" frameborder="no" ></iframe>-->
    </div>
    <script type="text/javascript">
        /*$('div:last').load($('input[type=hidden]:last').val())*/

        $.get($('input[type=hidden]:last').val(), function(data) {
          $('.surveyDiv div:last').html(data);
        });

        $('div:last').ready(function() {
            $('#loadingPic').css('display','none')
        });
    </script>
  <% end %>
</div>

Samich的答案很好,但是当我使用它时,我现在看不到加载的html ..呵呵

2 个答案:

答案 0 :(得分:0)

我真的不明白...... ASP?

但试试这个

<div id="surveyDiv" style="overflow-y:auto;" >
    <% @sections.each do |sec| %>
    <% #sec = @sections.first %>
    <br/>
    <% @div_id = "survey_section_" + (sec.id).to_s %>
    <div id="<%=h @div_id %>">
        <img src="/images/loading.gif" id="loadingPic" />
        <input type="hidden" class="helloimhidden" id="hid<%=h @div_id %>" name="hid" value="<%=h @srcString + "?section=" + (sec.id).to_s %>" />
    </div>
    <% end %>
</div>
<script type="text/javascript">
    $('.helloimhidden').each(function() {
        var myInput = $(this);
        $.get(myInput.val(), function(data) {
            myInput.parent().html(data);
        });
    });
</script>

请让我知道它是怎么回事,我担心只有最后一个div会因myInput被覆盖而显示结果...如果是这样试试

<script type="text/javascript">
    var myI = 0;
    var myInput = [];
    $('.helloimhidden').each(function() {
        myInput[myI] = $(this);
        $.get(myInput[myI].val(), function(data) {
            myInput[myI].parent().html(data);
        });
        myI++;
    });
</script>

答案 1 :(得分:0)

Samich是对的,你的任务可以。关于调整div的大小:我在我的一个网站上遇到了类似的问题。 Popup根据加载的内容调整大小,但在safari和explorer中发生了一些奇怪的事情。如果文本太长,那么popup占用了最大宽度,这是不好的,我更喜欢用word换行。理想的方法是定义内容中内容的宽度。例如,您要将HTML加载到容器中:

<div class="d1">some text</div>

为了提供跨浏览器的一致性,您应该通过css定义.d1宽度或为div标签定义内联样式。