Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

Include HTML from a remote location

I have a file with some HTML & jQuery code that I'd like to stick into various parts of a shopping site. I'd like something like
<--#include FILE="http://mysite.com/stuff.html -->

Open in new window

This doesn't work, of course, because it assumes that FILE is on the same server.

I considered
<script src="http://mysite.com/stuff.html" type="text/javascript"> </script>

Open in new window

But that assumes the source is JavaScript code and what I have is HTML and jQuery code.

The shopping site does not appear to have PHP enabled, so that's not an option.

Any ideas?
0
BlearyEye
Asked:
BlearyEye
  • 9
  • 3
  • 3
  • +6
2 Solutions
 
doublestickCommented:
Did you try using frames?

<iframe src="http://mysite.com/stuff.html"></iframe>
0
 
BlearyEyeAuthor Commented:
iframes produces a box around the button ... kind of ugly. I'd like it to be seamless.
0
 
Mark GilbertSenior Performance EngineerCommented:
Hmm, why not ajax the page in using jquery then when it's received by ajax pipe the result into an element on the page. Not as elegant as a remote PHP include but better result than iframes.

Additionally it's worth mentioning that with the iframes you can define styles for that and remove the borders but then again they're frames and not a perfect solution.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
leakim971PluritechnicianCommented:
0
 
nanharbisonCommented:
I think you can style the frame so it doesn't show the border.
Another solution would be to use cURL:
http://davidwalsh.name/curl-download
But it is a lot of work to figure out how to use it.
0
 
mrcoffee365Commented:
If you are using pages from another site, the correct way to do it is with an iframe.  There are more complex ways to do it with programming, so if you have access to a programmer they can do it for you as well.  As you've discovered, server side includes will not load files from other web sites.

If you use an iframe, this will make it invisible and collapse around the displayed page area:

<iframe src="http://www.mysite.com/page.html" name="frameapage1" id="frameapage1" scrolling="no" width="351" height="250" bgcolor="#FFFFFF" frameborder="0" marginwidth="0" marginheight="0"></iframe>
0
 
BlearyEyeAuthor Commented:
nanharbison: I can't use php on the shopping site.

leakim971: That looks kind of plausible. However, I'm not trying to overlay an existing site. Instead, the shopping site lets me modify part of the body code for an item to give a description of the item. So I'd like to inline the imported stuff. Also, I don't think I can modify the CSS code for the page.

ingwa: I didn't follow. Can you point me to an example?

All: the stuff I want to import on each page is a button whose target value depends on where the page was called from (hence the jQuery). It's ok if the button appears on a line all by itself. So maybe some form of iframe with borders removed and size carefully calculated would give the illusion that the code was pasted in.
0
 
nanharbisonCommented:
You can draw in an image from another website,
I just did it here:
http://ladyslipperwebs.com/ee/image.html
The image is on a home cooking site I was looking at to see how to cook spaghetti squash.
http://homecooking.about.com/od/vegetablerecipes/ss/spagsquashsbs_2.htm
0
 
BlearyEyeAuthor Commented:
nanharbison: Yes ... but what I want to import is html & jQuery, not an image
0
 
Ray PaseurCommented:
Why not copy the HTML and put it on your site?
0
 
BlearyEyeAuthor Commented:
Because it's used for each product that's listed on the shopping site. If some change is necessary, I want to minimize the number of places I have to touch.
0
 
Mark GilbertSenior Performance EngineerCommented:
BlearyEye, certainly here's an example:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Open in new window


Source: http://api.jquery.com/jQuery.ajax/

What it does:

The jquery will be executed at which point it instructs your browser to grab the url and then the data received (html source) will then get pushed into an element (html() function forces html of element to update with value of data) on the page with a class of result.

Hope this helps.
0
 
Ray PaseurCommented:
it's used for each product that's listed
And you're not concerned that the HTML is on an external site?  I would be in a panic!
0
 
ahoffmannCommented:
if the code to be included is on an external server, there is no way to include it on browser side due to SOP (same origin policy) except using iframes, AJAX does not help either 'cause it can only connect back to the server where the page was loaded from

either the complete code needs to be javascript and included using a <script src= > tag, or you need to provide the code from the server where the page is loaded from

as user I'd panic (like Ray) if I should shop on such a side, the next (better) one is one click away ;-)
0
 
Mark BradyPrincipal Data EngineerCommented:
Do you have access to php on any server? You could get the page contents like this..

$file = file_get_contents('http://www.domain.com/index.html'); // whatever the URL is
Now $file contains the entire contents of that webpage.

You could save this content to a file and load it into your page with javascript perhaps?
0
 
BlearyEyeAuthor Commented:
The security issue is a good point. Would you be concerned even if you started with my site and saw that the inserted code on the shopping site was from my site? It appears on product description pages on the shopping site (which I can customize), so it's not part of the actual purchase process.

This isn't data scraping .. I have the code ready to be inserted.

I'll give ingwa's suggestion a try. But it's beginning to look like pasting onto each page would be the simpler thing. Or perhaps I'll be able to tweak iframe so it doesn't look ugly.
0
 
Mark GilbertSenior Performance EngineerCommented:
BlearyEye, all the experts are correct in that pulling html from another site can/could be dangerous. It's an external source, and you have no idea what they could do to the code. However if it's a site/software that you already run, or you trust the source then yes, I say go for it. I think most of us were taken by surprise by the fact that you're pulling in "stuff" from another source...it's, shall we say dicy.

Another alternative of course is to scrape the external site and compile the results into a database. That way you're able to migrate the data easily in the future but will require a server side scripting language of sorts.

Hope this helps.
0
 
mrcoffee365Commented:
You saw my post with sample html to make the iframe border invisible, right?
0
 
BlearyEyeAuthor Commented:
mrcoffee365: I missed that in the flood of helpful comments. That might be just the thing.
0
 
BlearyEyeAuthor Commented:
ingwa: it's not clear how I should customize the code you suggested. Should the URL be that of the code I want to include? I tried as shown below and get the alert that the load was performed but don't see that the load actually happened.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
  url: 'http://mysite.com/include.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});
</script>

Open in new window

To keep it simple for the moment, the code I'm including is itself just an alert.
<script type="text/javascript">
alert('code is imported');
</script> 

Open in new window

0
 
mrcoffee365Commented:
The browser has to execute a script for you to get the alert.

You haven't posted enough code to tell. but if you're getting the alert from the Ajax code that the load executed, then do a View Generated Source to see if the loaded html was put into your page.

You're going to have to do a lot of debugging in Javascript, and it looks as if you are new to this.

Get WebDeveloper for Firefox, that will make it easy for you to see View Generated Source (when the html in the page has been manipulated by javascript code after you retrieved the initial page from the server).

Get FireBog for Firefox, and use it to step through the javascript as it executes.
0
 
BlearyEyeAuthor Commented:
Yes, I am new to this kind of programming. I'll get the tools you indicated and see what they show me. Thanks for the pointers.
0
 
BlearyEyeAuthor Commented:
Sorry for the delay in closing this out ...
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 9
  • 3
  • 3
  • +6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now