Question

我看过几个页面，这些页面涉及多个div来加载文件，但是它们使用php。是否可以使用jquery从NAV部分的外部html页面加载到同一页面上的多个div中？我已经看到并解决了可以在其中加载一个div的问题，但没有看到如何在同一页面上加载到多个div的问题。这可能吗？

我正在从使用8个窗口的基于框架的系统转换 -3个窗口，用于查看通过打开的文档 -1个打开子主题菜单的主菜单 -1个进入索引窗口的子主题菜单。
-3个将文件发送到查看窗口的索引窗口

在弹性框页面

.row1 {
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: nowrap;
     min-height: calc(70vh); /* set min container height to viewport height */
}

.row2 {
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: nowrap;
     min-height: calc(30vh); 
     /* set min container height to viewport height */
}


.col-1 {
    flex: 0 1 28%;
    background: beige;
    border: 1px solid black;
    font-size: 2em;
    padding: 4px;
    overflow: hidden;
    overflow: scroll;
    box-sizing: border-box;
    min-height: calc(70vh); /* set min container height to viewport height */
}

.col-2 {
     display: flex;
     flex: 0 1 16%;
     margin-left: auto;
     background: ;
     border: 1px solid black;
     padding: 4px;  
     text-overflow: ellipsis;
     max-height: 70%;
     overflow: hidden;
     box-sizing: border-box;
     min-height: calc(70vh); /* set min container height to viewport height */   
}

.col-3 {
    flex: 0 1 28%;
    background: beige;
    border: 1px solid black;
    padding: 4px;
    overflow: hidden;
    overflow: scroll;
    box-sizing: border-box;
     min-height: calc(30vh); /* set min container height to viewport height */
}


.col-5 {
    flex: 0 1 16%;  
    margin-left: auto;
    background: #eee;
    border: 1px solid black;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    min-height: calc(30vh); /* set min container height to viewport height */
    min-width: calc(10vw);
}

body {width: 100%; height: 100%; margin: 0; padding: 0}

li.en24-N {  
    color: black;
	font-family: arial, Sans-serif;
	font-size: 24pt;
}

p {
    color: black;
	font-family: arial, Sans-serif;
	font-size: 12pt;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
     <title>frame_scren_lang</title>
    
     <!--Make sure your page contains a valid doctype at the very top-->

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <section class="row1">
      <div class="col-1" id="file-A">view file A</div>
      <div class="col-1" id="file-B">view file B</div>
      <div class="col-1" id="file-C">view file c</div>
      <div class="col-2" id="subtopic-menu">sub-topic-menu</div>
    </section>

    <section class="row2">
      <div class="col-3" id="index-A"> index to view A files</div>
      <div class="col-3" id="index-B"> index to view B files</div>
      <div class="col-3" id="index-C"> index to view C files</div>
      <div class="col-5" id="main-menutoc">main-menu</div>
    </section>
  </body>
</html>

Answer 1

如果要加载的文件与当前页面来自同一域，则非常简单。您可以在Jquery中使用get函数以字符串形式获取内容并将其作为innerHTML添加到div中。

<script>
function fillElementFromFile( element, file ) {
    $.get( file ).success( function( data ) {
        // Once the file is fetched the element is filled with it:
        element.innerHTML = data;
    });
}

$(document).ready(function() {
    // array of the files to fetch
    var files = [ "url-1", "url-2", "url-3" ];
    // array corresponding to the one above, of the divs to fill
    var elementIds = [ "#file-A", "#file-B", "#file-C" ];

    $.each( files, function ( index, file ) {
        // Iterates through each file and element
        // Calls the function above to fill each div with its file
        fillElementFromFile( $( elementIds[ index ] ), file );
    });
});
</script>

如果它们不是来自同一域，则将因浏览器实施Same Origin Policy（一种旨在减少网络钓鱼攻击的安全措施）而导致错误。由于您不想自己使用PHP，因此可以使用已有的许多Web应用程序中的任何一种来规避Same Origin Policy。 https://multiverso.me/AllOrigins/和其他版本一样好，并且它是免费的，因此在本示例中将使用它。您将使用以下命令替换fillElementFromFile( element, file )函数：

function fillElementFromFile( element, file ) {
    var jsonUrl = 'http://allorigins.me/get?url=' + encodeURIComponent(file) + '&callback=?';
    $.getJSON( jsonUrl, function( data ) {
        element.innerHTML = data.contents;
    });
}

在多个div中加载外部HTML

1 个答案: