I found the snippet below for creating an iframe:
I'd like to only load the textual content at http://www.host.com and make the iframe invisible using display:none
Background:
I need an effective way to parse out the favicon location. Not all site have a default location. For example <link rel="SHORTCUT ICON" href="../images/logo_small.ico" />.
Hence all I need are the textual contents. PHP has a function that does this ( file_get_contents) but I want to do it on the client side.
Here is the mdn documentation on iframe
For server-side PHP use file_get_contents.
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://www.host.com");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
Example of Delicious Bookmarklet:
javascript:(function()
{
f='http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+
'&title='+encodeURIComponent(document.title)+'¬es='+
encodeURIComponent(''+
(window.getSelection?window.getSelection():document.getSelection?
document.getSelection():document.selection.createRange().text))+'&v=6&';
a=function()
{
if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','location=1,links=0,scrollbars=0,to
olbar=0,width=710,height=660'))
{
location.href=f+'jump=yes'
}
};
if(/Firefox/.test(navigator.userAgent))
{
setTimeout(a,0);
}
else
{
a();
}
})()
You will only have access to the link element in the iframe when both yours and the framed page are in the same domain. To cite the docs you found:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain.
Therefore, it will be needed to use a PHP solution. Load a given domain, use a tagsoup parser and query the dom for link[rel="SHORTCUT ICON"].
You can create a JSON API with that solution, which can be used over Ajax from the clientside js code of your application.
I think you will struggle to get the information client side if the page is located on a different server, due to cross-site scripting restrictions within the browser.
If it is all local you want to look at:
XMLHttpRequest();
and
getResponseText();
I think you are probably best using the PHP method though.
Edit:
This is a similar question I think:
XMLHttpRequest to get HTTP response from remote host
Responses there may be of further assistance.
Related
The page 1 works an loads well into an iframe, but when I try to access through JS I got this error.
Uncaught DOMException: Blocked a frame with origin "https://domain1.com" from accessing a cross-origin frame (the frame that is trying to access is in "https://domain2.com" )
I'have the full access in both servers, and I already tried with 'X-Frame-Options' & header 'Access-Control-Allow-Origin' header, even tried to remove the X-Frame-Options header.
I don't know what else do.
I recommend that you not use iframes for your use case. Instead, fetch the content that you want to insert into the page through an XHR call, and insert it directly into the page. This only works if you're inserting your own content that you control.
That way, the content will actually be in the DOM of your main web page, and the outer elements around your content will grow in height automatically, subject to your CSS overflow setup and that kind of thing.
Here's an example of how I load a central footer from a corporate web site onto lots of web sites from the same company:
...
<div id='lazyFooter'></div>
</body>
<script>
function footerCallback(json_data){
document.getElementById('lazyFooter').outerHTML = json_data[0];
}
window.onload = function() {
var script = document.createElement('script');
script.src = 'https://footers.ourcompany.com/footer.min.json'
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
This example uses JSONP, so the file that you load needs to be formatted as a Javascript function:
footerCallback(["\ <style class=\"embed\">\n\
#font-face{font-family:'Darby Sans ... </style><footer class=\"
... </div>\n\ </footer>\n\ "]);
If you're embedding someone else's content and it's not formatted as a JSONP response, then you have (at least) two options:
Use an iframe instead and deal with the Javascript hassles to set the height. (Ugly, not portable across browsers.)
Deploy a simple server-side microservice with an AWS Lambda function or something, for fetching the third-party content on the server side and packaging it as a JSONP response that you can embed in your page. Or, if you can run that microservice on the same domain as your site, then you don't need to worry about JSONP and you can simply proxy bare HTML from the third-party site through the microservice to your XHR call.
for a project at school I am trying to make a website that can show your grades in a prettier way than it's being done now.
I have been able to log in to the site using cURL and now I want to get the grades in a string so I can edit it with PHP.
The only problem is that cURL gets the html source code when it hasn't been edited by the javascript that gets the grades.
So basically I want the code that you get when you open firebug or inspector in a string so I can edit it with php.
Does anyone have an idea on how to do this? I have seen several posts that say that you have to wait till the page has loaded, but I have no clue on how to make my site wait for another third-party site to be loaded.
The code that I am waiting to be executed and of which I want the result is this:
<script type="text/javascript">
var widgetWrapper = $("#objectWrapper325");
if (widgetWrapper[0].timer !== undefined) {
clearTimeout( jQuery('#objectWrapper325')[0].timer );
}
widgetWrapper[0].timer = setTimeout( function() {
if (widgetWrapper[0].xhr !== undefined) {
widgetWrapper[0].xhr.abort();
}
widgetWrapper[0].xhr = jQuery.ajax({
type: 'GET',
url: "",
data: {
"wis_ajax": 1,
"ajax_object": 325,
'llnr': '105629'
},
success: function(d) {
var goodWidth = widgetWrapper.width();
widgetWrapper.html(d);
/* update width, needed for bug with standard template */
$("#objectWrapper325 .result__overview").css('width',goodWidth-$("#objectWrapper325 .result__subjectlabels").width());
}
});
}, 500+(Math.random()*1000));
</script>
First you have to understand a subtle but very important difference between using cURL to get a webpage, and using your browser visiting that same page.
1. Loading a page with a browser
When you enter the address on the location bar, the browser converts the url into an ip address . Then it tries to reach the web server with that address asking for a web page. From now on the browser will only speak HTTP with the web server. HTTP is a protocol made for carrying documents over network. The browser is actually asking for an html document (A bunch of text) from the web server. The web server answers by sending the web page to the browser. If the web page is a static page, the web server is just picking an html file and sending it over network. If it's a dynamic page, the web server use some high level code (like php) to generate to the web page then send it over.
Once the web page has been downloaded, the browser will then parse the page and interprets the html inside which produces the actual web page on the browser. During the parsing process, when the browser finds script tags it will interpret their content as javascript, which is a language used in browser to manipulate the look of the web page and do stuff inside the browser.
Remember, the web server only sent a web page containing html content he has no clue of what's javascript.
So when you load a web page on a browser the javascript is ONLY interpreted once it is downloaded on the browser.
2. What is cURL
If you take a look at curl man page, you'll learn that curl is a tool to transfer data from/to servers which can speak some supported protocols and HTTP is one of them.
When you download a page with curl, it will try to download the page the same way your browser does it but will not parse or interpret anything. cURL does not understand javascript or html, all it knows about is how to speak to web servers.
3. Solution
So what you need in your case is to download the page like cURL does it and also somehow make the javascript to be interpreted as if it was inside a browser.
If you had follwed me up to here then you're ready to take a look at CasperJS.
I write my scripts in PHP, and there are HTML and javascripts inside. What I want is when I click a button(in HTML), it calls a javascript function, the function should visit a url like "http://localhost/1/2" And the page stays as before. Is it feasible?
I just want it work, no matter in js or php. Thanks.
Since the page is on the same domain, you may use an Ajax request:
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send(null);
Note that this does not do any error-checking, however. If you need that, there are a multitude of available tutorials easily found with a search.
And since you ask, for pages not on the same domain, using an <iframe> is sometimes possible:
var frame = document.createElement("iframe");
frame.src = url;
frame.style.position = "relative";
frame.style.left = "-9999px";
document.body.appendChild(frame);
This is commonly known as AJAX (being able to send a request to the server and receive a response back without navigating away from the page).
AJAX is supported in ALL modern browsers, but sometimes there are inconsistencies, so it is best to use a javascript framework such as JQuery, YUI or another framework.
I tend to use YUI, so here's a quick example on how to send an AJAX request using YUI. This uses the IO Utility:
// Create a YUI instance using io module.
YUI().use("io", function(Y) {
var uri = "http://localhost/1/2";
// Define a function to handle the response data.
function complete() {
Y.log('success!');
};
// Subscribe to event "io:complete"
Y.on('io:complete', complete);
// Make an HTTP request to 'get.php'.
// NOTE: This transaction does not use a configuration object.
var request = Y.io(uri);
});
So I'm running a crawler on my server and I'm needing to execute javascript to gain access to some of the data on my target site (target being the one I want to crawl). I had a question regarding a different approach to the problem here, but it's not needed for answering this one: [Dead]How to successfully POST to an old ASP.NET site utilizing Asynchronous Postback
My javascript is executed in the browser I call my php crawler from. The problem is that all javascript requests are targeted back at my own server rather than the target site (I get lead to links like /index.php on my own site rather than the target site).
My experience with javascript is pretty minimal and I'm not sure how I should redirect my requests to my target. Here is an example of a javascript function from the page that I'm calling:
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
... and the way that I call it:
echo "<SCRIPT language='javascript'>__doPostBack('-254870369', '')</SCRIPT>";
Is there some way of aliasing the server address from my own server to the target server or doing some other kind of handy workaround that would fix this problem?
There is no need to inject javascript in the target.
You can use wireshark to study all request made by the target. Wireshark is a quite hard to master but powerful. Instead you can try the net tab of the firebug addon.
Once you know how the target send requests and receive data from their server, you can use curl to imitate the request/receiving data. You don't need any more to build crawlers.
If this not answers your question explain a little more the scenario.
I would like to test if my page (php) is embedded in an iframe or not, in order to implement a different behaviour. Any idea how to test this. I'm also using jQuery if it helps.
Addition :
I'm especially interested if there would be a method to test this on the server rather than in the client with Javascript
You could use JavaScript, I think something like the following should work:
if (top != self) {
// you're in an iframe, or similar.
}
Link to original, meyerweb, article.
Edited with regard to the question's update:
Addition : I'm especially interested if there would be a method to test this on the server rather than in the client with Javascript
This can't be 'checked' on the server side, but, you could use the X-Frame-Options header, there are two options:
DENY: prevents the resource being framed anywhere (assuming the browser supports the X-Frame-Options header, anyway), or
SAMEORIGIN: which allows framing of the resource only by pages from the same-domain, much like JavaScript's same-origin policy.
To use this, you'd need to configure your server to send the relevant header; though specific advice for that can't be given without knowing what server you're running; though the linked article at the Mozilla Developer Center does show the Apache option.
maybe:
var isInIFrame = (window.location != window.parent.location) ? true : false;
I don't know if there is a specific JQueryway but in vanilla javascript you can simply;
if (top != self)
alert("framed!")
<script language="JavaScript" type="text/javascript">
function InFrame()
{
if (top.location != location) {
//Do whatever you need- your site is in an iframe.
//This will redirect to your site if you need to
//top.location.href = document.location.href ;
//
}
}
</script>