I need to create a javascript application that can display the content from another domain (admittedly another big website). Further interpretation of the DOM tree is not needed at the moment. It will be used by only ten more people.
I can make it work via php's get_content function. But that is very slow since it runs on the server side. I looked into any origin but cannot get it to work. It is best to not touch any origin since we use it extensively and we don't have much cash to spend around. Can anyone help? By the way, iframe is not an option since the big website blocked it. The code is below. Admittedly I kind of took it from another stackoverflow answer. Thank you in advance!
Btw. another engineer told me if I use the extension .hta instead of html, the same-origin policy issue would be resolved. I tried it and it did not work. But I was wondering if I did it right.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Try something like the following.
var invocation = new XMLHttpRequest();
var url = 'http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;
invocation.onreadystatechange = handler;
invocation.send();
}
}
Addition of [withCredentials = true] will enable the HTTP header "Access-Control-Allow-Origin:".
there's another good solution might be what you need via PHP ,
is to use class called PHP
Simple HTML DOM Parser
this class can copy all source of a websites and you can save it in your server with extension you want also you can modified what you need before you save and this class have a full documentation (You need to be good in PHP5 POO )
this a link for class
http://simplehtmldom.sourceforge.net/
and there a good advanced thing you can do it for make your website faster , is use a Cash System so you can download the source from website one time a Day or 1H or 12 Hours ,
and save it in your host .
i hope that will give you what you need .
Related
I'm working on a karaoke video assignment and was hoping to find a way to flip between two different index.html documents (one for chorus, one for verses) using JS. I have limited knowledge of Javascript and am in the process of learning it. So far I think I need to use the following:
$(document).ready(function () {
window.setTimeout(function () {
window.location.href = "index2.html";
}, 5000);
});
Right now I have my index1.html and index2.html for the chorus and verses. I'm thinking I'd make an external JS file with the above function which displays index1.html for x amount of seconds and then index2.html for another duration. Sorry if this question is too simple or not well clarified. Still a beginner so any help is appreciated! Thanks!
What you are looking for is:
window.location.replace('path/to/index2.html')
I'm not sure what your directory structure looks like but you can pass it a relative or absolute path.
you don't even need javascript for this purpose, just put this in your head section:
<meta http-equiv="refresh" content="5; url=index2.html">
it will redirect to index2.html after 5 seconds.
http-equiv means "http header equivalent". As you can guess it can also be a http header sent by the server so you can serve even pure txt documents and switch them using headers sent by server.
If you want to use the power of javascript, you don't need to switch between pages, you can simply hide one content or another which is pretty simple:
<pre id="verse1">
verse 1 here
</pre>
<pre id="chorus" style="display: none">
chorus here
</pre>
<script>
$(function () {
window.setTimeout(function () {
$('#verse1').hide();
$('#chorus').show();
}, 5000);
});
</script>
Title is pretty much self explanatory...
I'm getting the source code of the website but the value that I want to fetch is made dynamically via jQuery.
Let's assume that this is the source code of example.com
<div id="currentTime"></div>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("currentTime").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
Yes, to get the source code is very easy but how do I fetch what's going on in between :
<div id="currentTime">{This is what I'm looking for}</div>
So... Iow... Fetching the value that have been made via javescript (or jQuery) in between the #currentTime div.
Thanks!
You can do this:
$('#result').load('otherPageUrl.php div#currentTime');
See: Example
The only problem with this is cross domain restrictions or this will not be possible. The other way you can do this is by the use of iframe.
I am not sure how you are solving this problem (i.e. loading the contents of another website). But, sure enough you can not do it using AJAX because of the cross domain restrictions.
One possible thing you can do is to, use an iframe in your page to load the website dynamically and then refer to the element you are interested in. By this way, you don't have to worry about the content that is dynamically generated in the other web page.
Note: Make sure you are not making use of any data from an external website that you are not supposed to grab this way. If at all it is a website you are not associated with, be sure to double check what you are doing is something you are allowed to do!
The problem is that I have on my website many of exetrnal download links, and some of the links get expired, so I want to detect automatically the expired links.
for me a valid link is a direct file download link pointing to one of my file servers.
a broken link lead to a simple html page with an error message.
my first idea was to get the html source code of the download link and see if it contains an error but it did not work.
I've tried also javascript but the problem is that js do not deal with external links.
any ideas??
thanks a lot
if you dont mind letting the client do the work, you could try doing it with javascript.
i have a greasemonkey script that automatically checks all links in the open page, and mark them according to the server response (not found, forbidden, etc).
see if you can get some ideas from it: http://userscripts.org/scripts/show/77701
i know that cross domain policies do not apply to GM_xmlhttprequest, and if want to use a javascript solution, might have to try a workaround, like:
Is it possible to use XMLHttpRequest across Domains
Making JavaScript call across domains
cross domain XMLHttprequest
if you want a server side solution, i believe the above answer can help you.
This isn't a task for your front-end, but for the back-end. As supernova said, check it from your server once a day. AJAX requests will not be your answer, since the browser security policy doesn't allow requests to different domains.
Solution:
Ok, based on your comment, check this solution:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
var linksDiv = $('#links');
$('#generateLinks').click(function(){
//I don't know your logic for this function, so I'll try to reproduce the same behavior
var someURLs = ['http://www.google.com','http://www.djfhdkjshjkfjhk.com', 'http://www.yahoo.com'];
linksDiv.html('');
for(var i = 0; i < someURLs.length; i++){
var link = $('<a/>').attr('href', someURLs[i]).append('link ' + i).css('display','block');
linksDiv.append(link);
}
});
$('#getLinksAndSend').click(function(){
var links = linksDiv.find('a');
var gatheredLinks = [];
$(links).each(function(){
gatheredLinks.push(this.href);
});
sendLinks(gatheredLinks);
});
var sendLinks = function(links){
$.ajax({
url: "your_url",
type: "POST",
data: {
links: links
}
}).done(function(resp) {
alert('Ok!')
});
}
});
</script>
</head>
<body>
<div id="links">
</div>
<button id="generateLinks">Generate all links</button>
<button id="getLinksAndSend">Get links and send to validator</button>
</body>
</html>
It may be overkill but there's a program in linux kde called klinkstatus that can find broken links in a website:
https://www.kde.org/applications/development/klinkstatus/
I am having problems passing javascript values between frames in chrome. In other browsers (Opera and Firefox) it works. The first frame contains the following html:
<script> variable="frame 1 value";</script>
click here
and test.html is:
<html>
<head>
<script>window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + top.frames[0].variable + "</b>";
}
</script>
</head>
<body>
<div id="fred">
hi there</div>
</body>
</html>
I have looked on this site and others, and the have seen a suggestion that because chrome pages run in different processes they cannot pass values. Is this true, and if so is there a way around it (cookies?)
Thanks,
russell
(edited) I just found another answer which says this happens only on file protocol. Like the writer of the other question, I am writing an applicaiton meant to be run off a cd, so I need to use file protocol. The version of Chrome I am using is 9.0.
ry
This has something to do with cross-site scripting which may be a security issue. Since Chrome has a very strict behavior on this, it should be impossible to achieve what you want.
Fortunately, there may be a nifty trick that you can use (if your variable is only a string):
Change the link in the first frame to test.html?foo=bar
Read window.location.href in the second frame. This will yield something like "Z:\folder\test.html?foo=bar". Now you can use string manipulation functions to extract the value of foo (in case: bar) from the href.
HTML5 Storage to the rescue! For the first frame:
<script>localStorage.setItem('variable', 'frame 1 value');</script>
click here
And for test.html:
<html><head>
<script>
window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + localStorage.getItem('variable') + "</b>";
}
</script>
</head><body>
<div id="fred">hi there</div>
</body></html>
A note of caution: IE7 and some older browsers do not support localStorage. However, you should be able to use if (typeof(localStorage) == 'undefined') {} to detect which method you need to use.
Frames are deprecated since 1997 (HTML 4.0 specification) for many reasons - so the best recommendation is do not use them.
You can also run Chrome with command line argument --disable-web-security, but it is also bad recommendation.
I'm looking for a light weight method for client-side includes of HTML files. In particular, I want to enable client-side includes of publication pages of researchr.org, on third party web pages. For example, I'd like to export a page like
http://researchr.org/profile/eelcovisser/publications
(probably just the publications box of that page.)
Using an iframe it is possible to include HTML pages:
<iframe class="foo" style="height: 50em;" width="100%" frameborder="0"
src="http://researchr.org/profile/eelcovisser/publications">
</iframe>
However, iframes require specification of a fixed height, while the pages I'm exporting don't have a fixed height. The result has an ugly scrollbar:
http://swerl.tudelft.nl/bin/view/EelcoVisser/PublicationsResearchr
I found one reference to a method that appears to be appealing
http://www.webdeveloper.com/forum/archive/index.php/t-26436.html
It uses an iframe to import the html, and then a javascript call from the included document to a function defined in the including document, which places the contents of the body of the included file in a div of the including file. This does not work in my scenario, probably due to the same origin policy for javascript, i.e. the including and included page are not from the same domain (which is the whole point).
Any ideas for solving this? Which could be either:
a CSS trick to make the height of the iframe flexible
a javascript technique to lift the contents of the iframe to a div in the including page
some other approach I've overlooked
Requirement: the code to include on should be minimal.
No. The same-origin policy prevents you from doing any of that stuff (and rightly). You will have to go server-side, have a script on your server access that page and copy its contents into your own page (prefeably at build-time/in the background; you could do it at access-time or via AJAX but that would involve a lot of scraping traffic between your server and theirs, which may not be appreciated.
Or just put up with the scrollbar or make the iframe very tall.
As far as I know there is no CSS trick, the only way is to query the iFrame's document.documentElement.offsetHeight or scrollHeight, depending on which is higher, take that value and apply it on the iframe's css height ( add the + 'px' ).
try this ajax with cross domain capability
Why don't you use AJAX?
Try this:
<div id="content"></div>
<script type="text/javascript">
function AJAXObj () {
var obj = null;
if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
return obj;
}
var retriever = new AJAXObj();
function getContent(url)
{
if (retriever != null) {
retriever.open('GET', url, true);
retriever.onreadystatechange = function() {
if (retriever.readyState == 4) {
document.getElementsById('content').innerHTML(retriever.responseText);
}
}
retriever.send(null);
}
}
getContent('http://researchr.org/profile/eelcovisser/publications');
</script>
And then, you can parse the received page content with JS with regular expressions, extracting whatever content you want from that page.
Edit:
Sorry, I guess I missed the fact that it's a different domain. But as ceejayoz said, you could use a proxy for that.
If you're using jQuery, you can use the load method to retrieve a page via AJAX, optionally scrape content from it, and inject it into an existing element. The only problem is that it requires JavaScript.