There might be another solutions to do this, but I think you cat load Container content of each HTML page to your frame
follow these steps by JavaScript pure:
1- should make an function to load HTML page as XMLHttpRequest like:
var getHTML = function (url, callback) {
if (!window.XMLHttpRequest) return;
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (callback && typeof (callback) === 'function') {
callback(this.responseXML);
}
}
xhr.open('GET', url);
xhr.responseType = 'document';
xhr.send();
};
2- Make a function to handle your Option change event and call getHTML by passing your select value like:
function loadFram() {
var src = document.getElementById("opt1").value;
getHTML(src, function (response) {
var x = document.getElementById("frame1");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.body.innerHTML = response.documentElement.querySelector('[id="Container"]').innerHTML;
});
}
3- I supposed your HTML code is something like this or would be like this:
<form name="change">
<SELECT id="opt1" NAME="options" onchange="loadFram()" >
<option value="">Choose</option>
<option value="stuff1.html">Stuff1</option>
<option value="stuff2.html">Stuff2</option>
<option value="stuff3.html">Stuff3</option>
</SELECT>
</form>
<iframe class="iframe" id="frame1" src="" scrolling="yes" frameborder="0"></iframe>
try it you see everything work nice.
but you can do it by JQuery by simplified steps by $.get or $.ajax like
$('#opt1').change(function () {
var src = $(this).val();
$.get(src, function (data) {
var stuffContainer = document.createElement('div');
stuffContainer.innerHTML = data;
$('#frame1').contents().find('body').html($(stuffContainer).find('#Container').html());
});
}) ;
if you would like to use JQuery be sure to remove onchange="loadFram()" from your HTML.
Or by $.ajax like :
$(function () {
$('#opt1').change(function () {
var src = $(this).val();
$.ajax({
url: src,
dataType: 'html',
success: function (response) {
var stuffContainer = document.createElement('div');
stuffContainer.innerHTML = response;
$('#frame1').contents().find('body').html($(stuffContainer).find('#Container').html());
}
});
});
});
I preferred to provide the solution by JavaScript pure because you didn't Tag JQuery, anyway the above solutions works fine.
