display another website domain template on project using angularjs - javascript

so I had an http call using angularjs
$http.get(link).then(function(data, response, header) {
console.log(data.data.url);
});
which is returned with an JSON body like this
{url:"http://www.example.com/article/1"}
and I want to display it to the container that I've made, let say the container is this
<div id="containerArticle"></div>
I tried it using iframe but it gives me an error Load denied by X-Frame-Options which is the domain is forbid me to using iframe.
my question is, what is the best approach of displaying content of another domain using angualrjs ? I've been stuck for 2 days now..

You can consider JSONP if you are only doing Get requests.
Another approach is to create a proxy page on your server that in turn makes a request to the other domain. This is often referred to as a reverse proxy.

Related

How to wait for an HTML page and get result when page complitely created?

I have a page (page1.html) and I want to send an ajax to page2.html (http://m-kermani.github.io/getapp.html) and page2.html has an iframe that made by javascript
I made it by javaScript because I need to send a parameter to the page3
In page1.html I have:
$.get('https://m-kermani.github.io/getapp.html', function (data) {
alert(data);
});
and I just need the iframe content but beacuse it made by JavaScript I can't get it and that did not created! (This is the way JavaScirpt is)
I need to send ajax request and get the iframe content because I need an https domain for some reasons that GitHub.io is!
No I need to know is there anyway I can get the content of the iframe from GitHub page?
Is there any other way I can direly just have GitHub page and give the parameter to it and can get the content of the page3 (not using server side language)?
And suggestion about what can I do?
Sounds like you're trying to circumcent the same-origin policy. Unless the API you're trying to access specifically supports a way to do it (CORS, JSONP, etc), you can't do it. You should read the documentation of the API you're trying to access to see if they support accessing it from the client side.
An Ajax request is just a request for a resource. It just gets whatever the server is going to send. It doesn't automatically render the HTML and fetch dependant resources.
If you want the content of a frame, then you have to request the URL for the frame instead of the URL for the page with the <iframe> tag in it.
(The Same Origin Policy will still apply).

jQuery Ajax get error No Transport with a status 0

I am doing a jquery.ajax() call on one of our pages to fetch a small text file. I see some of the requests (not all) fail with resp.statusText: "No Transport" and resp.status : 0
What does the error mean (No Transport with a resp code of 0). Strangely it works on some browsers, and doesn't work on some. I couldn't find a patter by looking at the user agents of browsers, where it failed.
Any help would be highly appreciated. I am a beginner to javascript and jquery library, let me know if I omitted crucial information.
My use case:
abc.mydomain.com contains jquery.ajax(url:xyz.mydomain.com) call
Most likely it prevents you from firing a request because it things you are trying to access another domain. xyz.mydomain.com !== mydomain.com.
Why that is not allowed?
Read
Use a Web Proxy for Cross-Domain XMLHttpRequest Calls
Why the cross-domain Ajax is a security concern?
An example to why this is a security issue, assume you installed a bad plugin to your browser. If that plugin got the permission, it can read all loaded files to your browser and be able to edit/change/inject content and codes. Then it might send all collected data to designer own server.
... The most common business needs that are easily accomplished with browser plug-ins are: modify default search, add side frames, inject new content into existing webpage ...more
A good practice is to fetch the data thru ajax via JSON, if you are trying to access another site beside the one the script is calling from, then use JSON-P.
Read
JSON-P
JSON-P call to subdomain
Chrome ajax call to subdomain
A common architecture is to call the current domain that the script is loaded from, then use server script to fetch data from the other domain where the other domain will response to the request and return the data.
A code snippets of your function will help us understand your issue more.

Find element attributes on different domain using Javascript

Is it possible to find the attributes of certain elements on one website and display them on another website? For example, if I have website 1, can I use Javascript/jQuery to find out the size of a specific image or div on website 2 and display those attributes on website 1?
If I can't do something like that with Javascript, is there an alternative way of going about accomplishing that specific example?
1. What you are trying to do can't be done using any AJAX library. Browsers' cross-domain policy won't allow you to do this.
But you can do this with a combination of php (or any other server-side language) and AJAX. Create a php script like this:
<?php
$url=$_POST['url'];
if($url!="")
echo file_get_contents($url);
?>
Let us say the script's name is fetch.php.
Now you can throw an AJAX call from your jQuery code to this fetch.php and it will fetch the HTML code for you.
2. The same origin applies. try this code and you'll face security error,
$.get("other web page site", {}, function(content){
$("#receipe").html(content)
}, "html")
3. Using Greasemonkey, it is possible to make third-party requests. A jQuery-oriented tutorial is offered on this page. The short answer it to have Greasemonkey make the request on your behalf. Replace all your XMLHttpRequest objects with GM_xmlhttpRequest objects.
Useful links,
Can Javascript read the source of any web page?
http://www.sitepoint.com/forums/showthread.php?836704-How-to-get-contents-of-3rd-party-website-into-javascript-variable
Sadly because of same origin policy you can't access the DOM on a different domain. If you control both domains you maybe able to use CORS and modify the server HTTP headers to allow Javascript access.
The workaround to this is to use a server to act as a proxy between the two websites. So you would have a server side script on website 1 that would send a request to website 2 and return the content from website 1.

Loading a div from a different domain

I'm hosting a page on an sharepoint site, and need to pull content from multiple other pages. The content I need is on a different domain in a div, so I cannot use an iFrame. I've tried the following code with JQuery attempting to load the stcakoverflow container div from the landing page, but this doesn't seem to work. I'm assuming this is due to different origin policy:
<script>
$(document).ready(function() {
$('#LoadMe').load("http://www.stackoverflow.com#container");
});
</script>
Is there a way to do this through Jquery, or is there an alternate solution?
If you can encode the other domain's data in JSON, you can do cross-domain requests using JSONP requests. This of course requires that you are able to change or request a different type of encoding from the other domains so if that's not under your control this approach is not possible.
No, you can't just load up another page (or a piece of it) like that with Javascript. You would need to do it on the backend via PHP, .NET, or some other server-side scripting language, then pass the results to your page.
You can also get the content of the page that you need and parse it with regexp or as above was said Nate B, Write some type of code for example Rss Feed, Pass content with json, create some web service and etc

javascript call url from different domain

I want to post some data via javascript to another domain. Something like:
http://www.othersite.com/submitfunnyname?name=blah
The other site (othersite.com) has a REST interface that you can call (well actually this is a get example) to submit a funny name to them.
Can I do this already with javascript? I'm a little confused on this - I know if that service wants to return some data, I'd need to use something like JSON-P - even though here I'm submitting some data, I guess the service will return some message structure letting me know the result, so it would have to be JSON-P, right?
Thanks
Not a particular expert in JavaScript, but isn't this an example of "cross-site scripting", which is not allowed due to possible security threats?
I believe you need to have all HTTP calls being made to the same server domain as the page. You could have a handler on your own site pass the information on to the othersite.com.
You can either use JSON-P if the site supports it, or you can use your web server as a proxy - by making requests to your server, which will in turn use a library such as cURL to make the actual request to the remote site.

Categories