MizzBia, if you don't have control over your server (see post by John above), then do as indicated below. Try to understand what happens, then adapt to your needs.
(i) Put the following in your main page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html
<head>
<title>Including external content with ajax + object</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
/***********************************************
* Ajax Includes script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var rootdomain="http://"+window.location.hostname
/*This line replaces the original function ajaxinclude(url) {*/
document.ajaxinclude = function (url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null);
//This line added to the original
document.write('<div style="display:none">');
writecontent(page_request)
//This line added to the original
document.write('<\/div>');
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}
/****************ADDED to the Ajax-script*****************/
/* This is used to replace the ajax-HTML that is fetched with the Ajax-function above, but it leaves the external js and css intact. Used because Ajax-calls don't handle foreign characters well. Fetching external HTML with the help of a hidden object solves this problem. You don't have to put content in blank.html*/
document.write('<object type="text/html" data="blank.html" width="0" height="0" name="object"><\/object>');
/*With this function, we load html into the object, from which the loaded content will be extracted with the help of function Transfer_To(InternalId) (below) */
function Load_External(url){frames['object'].location.replace(url)}
/* This is for transporting the entire content of an external file from the object to an internal div, or span etc.*/
function Transfer_To(InternalId){
try{document.getElementById(InternalId).innerHTML=window.frames['object'].body.innerHTML;}
catch(e){document.getElementById(InternalId).innerHTML=window.frames['object'].document.body.innerHTML;}
}
/* This removes 'old' extracted content. Use it if you want to replace an external file with another one*/
function Remove(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == SomeClass){
/*while (els.item(i).firstChild)
els.item(i).removeChild(els.item(i).firstChild);*/
els.item(i).innerHTML='';
}
}
}
/*This is not sympathetic AT ALL, but I'll keep it here until Opera handles object-elements correctly */
if(window.opera){alert("You're using Opera. On this site, the links for importing external documents don't work with this browser. Please use another browser.");history.back()}
</script>
<!-- Put as many includes as you want. It replaces the original <script type="text/javascript">ajaxinclude("afile.htm")</script> -->
<script type="text/javascript">
document.ajaxinclude("external1.html");document.ajaxinclude("external2.html");
</script>
<style type="text/css">
body{font-family:verdana; font-size:80%;margin:10px}
</style>
<body>
<a href="javascript:;" onmousedown="Load_External('external1.html');" onclick="Remove('div','inserted'); Transfer_To('somediv1');">external1.html</a> |
<a href="javascript:;" onmousedown="Load_External('external2.html')" onclick="Remove('div','inserted'); Transfer_To('somediv2')">external2.html</a>
<button style="padding:0 .25em 0 .25em; width:auto; overflow:visible;" onclick="Remove('div','inserted')">Remove external</button>
<!-- The divs in which the external contents are loaded -->
<div id="somediv1" class="inserted" ></div>
<div id="somediv2" class="inserted" style="position:absolute;left:150px"></div>
</body>
</html>
(ii) The file external1.html could be something like:
Code:
<html>
<head>
<style type="text/css">
.styles1{color:darkred;padding:3px;background:#dedede;border:1px solid red; width:350px; margin-bottom:2px;}
</style>
<script type="text/javascript">
function alarm1() {alert('External script, called from "external1.html"')}
</script>
</head>
<body>
<div class="styles1">
This is some part of <i>external1.html</i>.<br>
Foreign characters remain intact during the transfer: é, è, ú, ñ.<br>
The external scripts and styles are not lost during the process.<br>
Click <a href="javascript:void(0)" onclick="alarm1()">here</a> to see an external script at work.
</div>
</body>
</html>
(iii) External2.html:
Code:
<html>
<head>
<style type="text/css">
.styles2{color:darkred;padding:3px;background:lightyellow;border:1px solid red;width:350px;margin-bottom:2px;}
</style>
<script type="text/javascript">
function alarm2(){alert('External script, called from "external2.html"')}
</script>
</head>
<body >
<div class="styles2">
This is some part of <i>external2.html</i>.<br>
Foreign characters remain intact during the transfer: é, è, ú, ñ.<br>
The external scripts and styles are not lost during the process.<br>
Click <a href="javascript:void(0)" onclick="alarm2()">here</a> to see an external script at work.
</div>
</body>
</html>
===
Good luck,
Arie.
===
Ajax Includes and Special Characters?
Reply With Quote
Bookmarks