Load external HTML in multiple divs
Load external HTML in multiple divs
I've looked at a few pages addressing multiple divs to load files but they use php. Is it possible to load from the NAV section external html pages into a multiple divs on the same page using jquery? I have seen and worked out where I can load one div but not seen how to load into multiple div on same page. Is this possible?
I am converting from a frame based system that uses 8 windows
- 3 windows for viewing docs that are opened via
- 1 main-menu that opens the sub-topic-menu
- 1 subtopic menu that opens into the index windows.
- 3 index windows that sends the files into the viewing windows
Heres the flexbox page
.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>
Lorddirt. Thanks for suggestion. Are not iframes on the way out or have I misunderstood this? how would iframes load these pages into my set up? can you use target when the div is used if I put a iframe inside it?
– loyal osterhoudt
Sep 20 '18 at 7:11
1 Answer
1
If the files you are loading are from the same domain as the current page this is pretty simple. You can use the get function in Jquery to get the contents as a string and add them as innerHTML to the div.
get
innerHTML
<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>
If they aren't from the same domain then you'll get an error caused by your browser's implementation of the Same Origin Policy, a security measure designed to make phishing attacks less likely. Since you don't want to use PHP yourself, you can circumvent the Same Origin Policy with any one of a number of web apps out there that already do this. https://multiverso.me/AllOrigins/ is as good as any, and it's free so I'll use that in this example. You'll replace the fillElementFromFile( element, file ) function with this:
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;
);
Thanks jla. This is actually an offline use note system. Does this script fill one index location upon a click of a link in the subtopic menu? The three index div hold different sub-menus. One might be a vocab index by chapter, one might be an article index by chapter and the last one might be notes by chapter/reading-guide by chapter. The subtopics use a-b-c links to send the file to the index-A Index-B or index-C DIV. Would it help if I showed the menus? They are css 3 menus. There are 7 - 40 index files per subject in a school setting
– loyal osterhoudt
Sep 20 '18 at 7:31
@loyalosterhoudt Sure, showing the menus would be very helpful. The Jquery method should still work fine, it's a case of fitting it with your current implementation. If the full code is very long perhaps put it into a CodePen or Jsfiddle and paste the link.
– jla
Sep 20 '18 at 13:27
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy
Couldn't you just open the files with iframes? You wouldn't even need jquery, just javascript.
– Lorddirt
Sep 16 '18 at 10:27