Include remote file using JS

Forum Moderators: open

Message Too Old, No Replies

Include remote file using JS

ish

6:07 pm on Mar 10, 2010 (gmt 0)

I would like to be able to serve content to my clients' websites, using javascript.

The content I would like to serve is generated from PHP on my server.

I've seen people do this using code like this, that is placed on the client site:

<script type="text/javascript" language="javascript" src="http://www.mydomain.com/page.php?id=15&id=123456">

What do I need to have on my server in order for the content to be displayed on their site?

Any help is very very appreciated :)

ish

3:09 pm on Mar 11, 2010 (gmt 0)

To clarify, the content being served is on a different domain and server, to the one that displays it.

I thought about using an iframe, but I would much rather use a single line of JS.

Fotiman

3:20 pm on Mar 11, 2010 (gmt 0)

As long as page.php is setting a response header to indicate that the mime-type is JavaScript, you shouldn't have to do anything special.

ish

4:14 pm on Mar 11, 2010 (gmt 0)

Thanks Fotiman

I am still struggling.

I have tried this on my server as page.php, but it didn't work:

<?php
header("Content-type: text/javascript");
echo "hello world!";
?>

I tried with application/javascript too, but still no output.

Fotiman

4:28 pm on Mar 11, 2010 (gmt 0)

Well, that's because "hello world!" is not valid JavaScript. If you want this to output some HTML content inline, you would need to do something like

document.write("hello world!");

ish

9:49 pm on Mar 11, 2010 (gmt 0)

Thank you, you are a star :-)

callans

5:47 pm on Apr 26, 2010 (gmt 0)

it sounds like you have gotten this to work, I have to do the same thing, but I did not have success.

Starting include

<script type="text/javascript" language="javascript" src="http://example.com/testit.php">

testit.php
<?php
header("Content-type: text/javascript");
echo "document.write('hello world!');";
?>

I tried a couple of different ways. Can you please provide the full script or tell me what is wrong with mine?

[edited by: whoisgregg at 9:37 pm (utc) on Apr 28, 2010]
[edit reason] Exemplified URL :) [/edit]

callans

5:56 pm on Apr 26, 2010 (gmt 0)

Never mind, it was the single quotes in the write statement that caused the trouble.

rocknbil

5:30 pm on Apr 27, 2010 (gmt 0)

Just going to throw this in the mix, hopefully it's not a derailment . . . this is the Javascript forum, so when you think of including files via Javascript, it make sense to use XMLHttpRequest to do an "include." In this example, you could just as easily write the remote file to a DOM element instead of doing a document.write.

The advantage of this is that the output can be anywhere in the document, and you don't need the script element at the precise location where you want it output. With document.write, it's going to write "at that location."

A quick example, may contain errors:

<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p>Some content</p>
<p id="write-me">This is where I want my external content</p>

The contents of test.js would be something like


window.onload=function() { write_external_content('url-to-your.php'); }; 
// 
function write_external_content(url) { 
 if (document.getElementById('write-me')) { 
 var element = document.getElementById('write-me'); 
 element.innerHTML = '<em>Loading Content ...</em>'; 
 xmlHttp=GetXmlHttpObject(); 
 xmlHttp.open("GET", url);  
 xmlHttp.onreadystatechange = function() {  
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {  
 element.innerHTML = xmlHttp.responseText;  
 } 
 else { element.innerHTML = 'Oops. Request failed.'; } 
 } 
 xmlHttp.send(null);  
 } 
} 
// 
function GetXmlHttpObject() { 
 var xmlHttp=null; 
 try { 
 // Firefox, Opera 8.0+, Safari 
 xmlHttp=new XMLHttpRequest(); 
 } 
 catch (e) { 
 //Internet Explorer 
 try { 
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
 } 
 catch (e) { 
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 } 
 } 
 return xmlHttp; 
}

callans

7:12 pm on Apr 27, 2010 (gmt 0)

Thanks for the suggestion. I found a work around, but would like to use what you have suggested. I am getting the Oops error:

TEST.JS

window.onload=function() { write_external_content('ajax_testit.php'); };
//
function write_external_content(url) {
if (document.getElementById('write-me')) {
var element = document.getElementById('write-me');
element.innerHTML = '<em>Loading Content ...</em>';
xmlHttp=GetXmlHttpObject();
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
element.innerHTML = xmlHttp.responseText;
}
else { element.innerHTML = 'Oops. Request failed.'; }
}
xmlHttp.send(null);
}
}
//
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
//Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

AJAX_TESTIT.PHP

<?php
echo "hi";
?>

rocknbil

8:21 pm on Apr 28, 2010 (gmt 0)

I just tested what you have there. I'm surprised it even ran, as said, it wasn't working code, just typed on the fly. :-)

I don't know why it's broken, but likely it's because there's no header. My implementation worked by simply adding the header:

<?php
header("content-type:text/html");
echo "hello world";
?>

However, I 'DO' see "oops request failed" for a split second. It kinda makes sense, look what it's doing:

if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

Meaning, if the xmlHttp object is ready and the status code is 200 (ok) change the inner html. So I suppose what you want there is the loading data message in the else.

Surprised I've never seen it before. :-)

callans

2:08 am on Apr 29, 2010 (gmt 0)

hmm. I think my problem is that the url being passed is not being found and causing the oops. When I provide the full url (e.g. http://www.example.com/ajax_testit.php) it works, but the browser gives a warning that the page is not in control of itself. Both pages are in the same directory, so I wonder why it can not find it.

rocknbil

3:46 am on Apr 30, 2010 (gmt 0)

browser gives a warning that the page is not in control of itself.

Not in control of itself? (Not picking on you, honest . . . ) what is the exact wording?

Is the referenced page from another domain? Doesn't make a lot of sense . . . curious.

callans

12:05 pm on Apr 30, 2010 (gmt 0)

"This page is accessing information that is not currently under its control. This poses a security risk. Do you want to continue?"

One domain name is the clients. It opens a javascript on my domain. Which fully references a php script on my domain. The browser seems to recognize that the javascript is referencing a fully defined url -- but doesn't seem to recognize that the domain of that url is the same as the domain of the javascript. I have tried it in IE and Safari (windows)