javascript - 在同一页面上加载外部 URL html，需要有导航 page1、2、3...，不能使用 iframe，尝试使用 DIV'S 但会弄乱外部源的 CSS

问题描述

第一次发帖，我已经搜索过了，这就是我想要做的，旧实现使用 iframe（有一个 iframe 用于导航，另一个用于 URL）但不再适用于 Chrome，无法启用 iframe。链接是这样的：

由于在论坛上搜索，这是我尝试过的：

$(function(){
          var $cur = $('#group .current');
          var $items = $('#group .item');
          
          function hideButtons() {
            $cur = $('#group .current');
            var index = $cur.index();
            if(index > 0) {
              $('#prev').show();
            } else {
              $('#prev').hide();
            }
            
            if(index < $items.length - 1) {
              $('#next').show();
            } else {
              $('#next').hide();
            }
            
            
          }
          
          hideButtons();
          
          $('#next').click(function(){
            $cur.next().addClass('current');
            $cur.removeClass('current');
            hideButtons();
          });
          $('#prev').click(function(){
            $cur.prev().addClass('current');
            $cur.removeClass('current');
            hideButtons();
          });
        });

.container {
  display: flex;
  justify-content: center;


}
.center {
  width: 800px;
 height: 90%;

}



.item {
  display: none;
  }

.item.current {
  display: block;
  }
.rptButton
{
  width: 80px;

}
.navButton
{
  width: 90px;
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/javax.faces.resource/jquery-1.7.2.min.js.xhtml?ln=javascripts"></script>


<style type="text/css"> 


</style> 

</head>
<title></title>
<body >
      <div style="text-align: center">
<button id="next" class="navButton">next</button>
<button style="display:none" id="prev" class="navButton">previous</button>
  </div>


       <div class="container" >
        <div class="center" id="previewFrame"  title="Preview Frame">
        <div id="group" >
              <!-- display page 1 no matter what-->
        <div id="divIDNo1" class="current item">

                    <c:url value="<%=openURL%>" var="myURLCustom">
                        <c:param name="page" value="1" />
                    </c:url>
                    <c:import url="${myURLCustom}" />
                </div>
        <!-- display page 2 and so on-->
        
      <c:forEach var = "i" begin = "2" end = "<%=numOfPages%>" varStatus="theCount">
        <div id="divIDNo${theCount.index}" class="item" >
    <c:import url="<%=openURL%>"> 
        <c:param name="page" value="${i}"/></c:import>
        </div>
      </c:forEach>
      </div>
</div>
</div>      

</body>
</html>

这可行，但在第 1 页之后，源页面的 CSS 搞砸了，字体变大，其他字体变小，线条消失。

我也尝试过加载外部页面，比如 10 页，带有分页符，但是即使打印选项正确显示它们，预览窗口也会将页面聚集在一起。

我试过看 MutationObserver 但仍然是编码新手，不知道如何实现这一点。

网址是这样的：

http://localhost:8080/viewDoc?entry=abc?page=1, 然后?page=2, ?page=3,....

它们需要在弹出窗口中加载，然后导航（下一个、上一个、第一个、最后一个）以转到下一个 URL，但弹出窗口必须保持打开状态，只有内容必须更改（第 1、2、3 页...... )

标签： javascripthtmljqueryjspiframe

javascript - 在同一页面上加载外部 URL html，需要有导航 page1、2、3...，不能使用 iframe，尝试使用 DIV'S 但会弄乱外部源的 CSS

问题描述

解决方案

推荐阅读