I'm currently designing a eBay listing template for a client in which i have managed to load JavaScript using a loader (www.test4.solowebs.co.uk). The JavaScript works in eBay without giving me an error which is fantastic as i used a loader rather than script. What i want is - at the bottom of the listing i want an external div to load from another site, (my own site test4.solowebs.co.uk/featured.html) which has in it two offers. The result of this is that i can change the offers on that page and it will automatically load into all of my listings, a bit like a iFrame. (only problem is eBay does not allow iFrames - and i haven't been able to find a workaround.)
The Question - Is there a way i can load an iFrame using Javascript? Or an alternate method which will allow me to load a div from an external page? (as ebay hosts the HTML it will have to be cross-domain compatible!) I'm an expert in HTML CSS and OK at JavaScript so anything other than that will have to be detailed and instructions to implement given.
Thank you in advance!
Use AJAX, or technically speaking: XMLHttpRequest.
Here's an article on SO about an in-line cross-browser XMLHttpRequest script: Cross-Browser XMLHttpRequest
Use it to populate your div asynchronously. Hope this helps.
Related
I'm looking to get some data from a Facebook page of a restaurant, but I'm kinda stuck. I want to load some divs from the facebook page of the restaurant, then get the ID's of the divs, since they contain some information i would like to use. Ive tried using the .load function from jQuery, but no luck. Of all the answers I've seen, they all include a url that's something like somefile.html. Is it possible to load the divs ids and some innerHTML from a live page like Facebook? Are they somehow downloading the html to a file then using that? Keep in mind I know nothing about PHP, so any solutions? Thanks!
The right way to do it would be though Facebooks graph API, take a look at this site and see if it offers the information you need https://developers.facebook.com/docs/graph-api/reference/page/
NOTE
As comments have pointed out, "web scraping" is FORBIDDEN on Facebook.com by Facebook policy. http://www.facebook.com/apps/site_scraping_tos_terms.php
Technically, I don't think this is possible with Facebook and just JavaScript.
In general, using just JavaScript, one solution would be to load the (external) site like FaceBook into an Iframe, and then grab all the DIVs and search the DOM that's loaded into the iFrame. However, I believe FaceBook (and other sites) set something called "CORS Request Headers" which prevent the page from loading into an iFrame -- also, as far as I know, this cannot be hacked around except to use another language to pull the HTML as a file (like with PHP).
Sources:
Facebook Forbids iFrames
JavaScript, Load Page in iFrame
I have been reading up on here about how to hide the source URL in an iFrame using Javascript and Jquery, but for some reason, I haven't found a solution that works so far with Wordpress.
So short and sweet, I am trying to hide a URL for competition reasons, I'm about to launch a new web page using an iFrame to display content from another website that I subscribe to and pay quite a bit of money for their services. So I don't want my competition to know about them and copy what I do.
What would be the best way that I could mask the HTML source link in the iFrame? I use the latest version of Wordpress to host my site.
Alternatively, I am open to more advanced solutions.
Thanks in advance.
I'm not stealing anything. I'm a businessman who pays taxes and I pay $1400 per year for the web service that I use and I don't want my competitors STEALING MY set up
Ok I'll take you at face value. As has been pointed out in comments, it's impossible to do this with plain HTML or Javascript. It simply can not be done. There is no way to prevent a user of a browser from seeing the URI's that are contacted. Period.
That being said you could:
Retrieve the HTML from the 3rd party with your web server using something like CURL in PHP.
Take the result of the above and send it out on a URL of your choosing.
Create HTML with an <iframe> or whatever else you want to display the content from the 3rd party and point it at your new URL on your web server.
The above is not trivial to do correctly and will require some knowledge and work on your part. One issue with the above method will be: passing along javascript, images, css, etc... correctly so that they appear to come from your server.
I can scrape static website using scrapy however, this other website that I'm trying to scrape has 2 sections in its HTML namely; "head" and "body onload". And the information that I need is in the body onload part. I believe that content is loaded after html is requested and thus the website is dynamic. Is this doable using scrapy? What additional tools do I need?
Check out scrapy_splash, it's a rendering service for scrapy, that will allow you to crawl javascript based web sites.
You can also create your own downloader middleware and use Selenium with PhantomJS (example). The downside of this technic is that you lose the concurrency provided by scrapy.
Anyway, I think splash is the best way to do this.
Hope this helps.
I have to embed an site with some functionality into a site, originally from another domain, into one of the pages we are working on.
I knew two different ways of doing this: Via JQuery using the .load() function and using IFRAMES.
I simply cannot seem to do it via JQuery due to the same-origin policy
IFRAME does load the site, but there is javascript functionality on that site and it does not work.
What other ways can I use to achieve this? Are there any newer, updated ways? I tagged this question as "2014" because I thought some new information could be relevant for this issue.
IFRAME should work. Can you confirm the javascript works on its own? The can you confirm there is no javascript errors when checking console settings in dev tools on chrome or firefox, that may come from the original pages javascript clashing with the embedded pages javascript?
Also the Access-Control-Allow-Origin header could be set in the embedded site which prevents it from being used in an iframe correctly.
I have a difficult one
I am trying to show an external website within my page (currently using an iframe)
The trick is I want to be able to edit the site
e.g. I really want to show a preview of another website that I can modify.
Not sure if there is any tools out there, was thinking of using a jquery request to create a page within my domain that I can edit?
Any advice?
If that would be possible from within the browser, that would be a bug.
The way you should do it, is creating some sort of a proxy on your own domain/server, and fetch the site through there. Then you're allowed to access the iframe and edit whatever you like.
Of course, the site won't run like it normally would, since it can't use its own cookies, AJAX calls, etc.
I think this js library could inspire you something!
easyXDM