Suppose I want to embed the latest comic strip of one of my favorite webcomics into my site as a kind of promotion for it. The webcomic has the strip inside of a div with an id, so I figured I can just embed the div in my site, except that I couldn't find any code examples for how to do it (they all show how to embed flash or a whole website).
Can someone please show me (or tell) how it's done?
PS I'd rather not use server side scripting or external services (which is what is often recommended for embedding RSS).
Update - Cross domain request with jQuery (on client side)
Yesterday I was browsing James Padolsey's blog, where he posted a great article, on how to do cross domain request with jQuery, also Chris Heilmann has a nice DEMO.
The principle is to use YQL -> a yahoo api for web page queries, where you receive a JSON with all the html. Happy scraping :)
Scrape remote data with php, load with jQuery
What about considering simple AJAX call, that would intercept the comic element and update with its contents your <div id="update-comic" /> primarily used for this purpose?
Also you will use a simple php to get the remote page, cause you cannot make ajax call on another domain
note: user must have JavaScript enabled, also following code uses jQuery library
Putting it all together
on your page, where you want to display remote comic strip create a div only for this purpose, lets call it update-comic
<div id="update-comic">
<!-- here comes scraped content -->
</div>
write down the php, call it comic-scrape.php, it will download the html from remote page, you should consider caching the response and updating it on a specified interval (e.g. 30min, 1hr, your call.. :))
server performance should not suffer after simple cache checking implementation
<?php
$url = 'http://www.example.com/';
$response = file_get_contents($url);
echo $response;
now comes the jQuery magic, where you make ajax call on your php scraper and take only the relevant element you are interested in. Place this script inside your view page (where you have your <div id="update-comic" />
<script type="text/javascript">
$(function () {
// set all your required variables
var
localUrl = '/comic-scrape.php',
elementId = '#remote-comic-id',
elementToUpdate = $('#update-comic');
// update the local elementToUpdate with elementId contents
// from your php in localUrl
elementToUpdate.load(localUrl + ' ' + elementId;
});
</script>
I hope, I covered everything.
Employing simplexml and xpath
As philfreo suggested in comment, a viable solution could also contain selecting the required id server-side. It is very easy with use of php's simplexml and a little xpath:
<?php
// set remote url and div id to be found
$elementId = 'remote-comic-id';
$url = 'http://www.example.com/';
// instantiate simple xml element and populate from $url
$xml = new SimpleXMLElement($url, null, true);
// find required div by id
$result = $xml->xpath("//div[id={$elementId}]");
// take first element from array, which is our desired div
$div = array_pop($result);
echo $div;
It's impossible because you cannot manipulate iframe/frame content. Using iframe tag will just modify content in tag, but not the src.
Neither with AJAX, because you have to be on the same domain.
So, for example, you can use PHP with cURL or quite simply with fopen.
You can just use an iframe. The content isn't literally on that page, but it looks like it.
Here's an example: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe
It looks like this:
<iframe src ="http://www.example.com/index.html" width="100%" height="300"></iframe>
<embed src="url of your comic" width="300" height="250" />
Related
There is a main Sales Page: site.com/sales-page
That page receives visitors from different traffic sources, and they are mentioned on its URL parameters, such as: site.com/sales-page?utm_source=fbads&utm_campaign=banner
That Sales Page has a link pointing to BUY NOW
How do I pass all URL parameters from the current window, such as "?utm_source=fbads&utm_campaign=banner" automatically to the next page via the BUY NOW button?
I need this so the Checkout page will know where the traffic came from, based on that forwarded parameter.
PS: I want to pass all parameters available in the URL, not just pre-defined ones.
PPS: Solution must work on most browsers and on static pages, better to not use cookies/php.
Thanks a lot.
There is no way to achieve this using HTML. You have to use a programming language.
For example:
<?php
$url = "http://example.com/foo/?" . $_SERVER['QUERY_STRING'];
?>
link
If you don't want to use PHP, then other programming languages are available.
There is no way to do it with just html. Best solution is serverside code. Fallback is to use JavaScript, but this will not work if JavaScript is disabled. You can read the search from the url and add it to your link.
<a id="buyNow" href="http://www.example.com">Buy</a>
<script>
(function () {
var lnk = document.getElementById("buyNow");
lnk.href = lnk.href + window.location.search;
}())
</script>
This assumes there is no querystring already on the link. If there is, you need to replace the ? in the search with a &
I wish to do the following things:
Insert external html blocks into new html pages
Use the same html header from one html file for a number of pages, without recreating the header again for all the pages
Please help!
You can use HTML Imports which is part of Web Components:
<head>
<link rel="import" href="/path/to/your/file.html">
</head>
If your page does not have to be pure HTML, you should consider using PHP or a similar server-side language.
There are plenty of options, depends on you:
1) use iframes (a lot problems with responsibility) http://www.w3schools.com/tags/tag_iframe.asp
2) ajax call in javascript, load external resource and then print it in placeholder tag (example is with jquery) http://www.w3schools.com/jquery/jquery_ajax_load.asp
3) use some server language/preprocessor (php, ruby, nodejs), depend if you can (need to by installed on server)
4) also there are static page generator, you add marks in your html, and they will compile html with marks to full static html http://hyde.github.io/ for example.
What you are talking about appears to be a process called templating. There are many ways to do this, including writing Javascript to insert pre-written HTML templates into the DOM (the webpage). You might also consider using a pre-written templating library such as http://handlebarsjs.com/ or another library which contains templating functions like http://underscorejs.org/. A simple MVC guide like:
http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html
May be helpful too, to get you started.
In a more practical sense, here's one possible solution:
To begin I would recommend putting the 'blocks' you want to insert in a separate folder. In the website I run, for example, I place them in the \templates folder (or subfolders) but you can more or less call it what you want as long as it makes sense to you. For our purposes let's say we've created block.html and put it in our \templates subfolder...
Now, within each template you will have whatever you want to load in; something like this:
<h2>Title of section</h2>
<p>My text.</p>
Or whatever you'd like. Then, you'll probably want to add an element to your main page which calls some Javascript, which loads your HTML template in when a particular condition occurs. For example, if you wanted to load in our block.html file you might write something like this:
<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>
Which would call a Javascript function called 'menuClicked()' when we click the div with the id 'calling-block'.
Within the function we would write something like this:
<script>
function menuClicked(insertEl, UrlString, onTemplateLoaded) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(insertEl).innerHTML = xhttp.responseText;
if (onTemplateLoaded) onTemplateLoaded();
};
};
console.log(UrlString);
xhttp.open("GET", UrlString, true);
xhttp.send();
};
</script>
This is a very simple way of doing things and I'm sure people will tell you there are problems with it, so I would definitely recommend doing your own reading as well, but I hope this covers the very basics.
You need tu use a server side functionality like php, aspx ...
I would like to display the content of a text file inside a HTML page (.rtf, .txt, .log,...) stored on the server.
I have tried with embed but seems that doesn't work.
<embed src="/path_to_text_file/text.rtf" width="500" height="300">
There is a "simple" method (or tag) to do that or I should scan for the content and print it with, for example, jQuery?
Something like this should do it:
<object data="/path_to_text_file/text.txt" type="text/plain"
width="500" style="height: 300px">
No Support?
</object>
Using a $.ajax() function with a .append() function inside you can easily grab the contents of a text document and display them on the page. Something along the lines of what you see below. Preform this on load of the page to immediately load the file in with the rest of the page.
$.ajax({
async:false,
url: 'folder/file.txt',
dataType: 'text',
success: function(data)
{
$('element').append(data);
}
});
Play around with it a little bit to get the correct result you are looking for. You could also use PHP but unless you really need to parse the data, PHP is a bit overkill in this situation.
is only for plugin content (flash, etc).
Try getting content using ajax, then write it with document.write;
Or use the include tag in a back end language (PHP, ASP, etc)
An iFrame might be useful in this context.
<iframe src="/path_to_text_file/text.rtf" width="500" height="300" frameBorder="0">
NOTE: apologies for the similarity to Keith V's answer and the fact he mentioned get requests - I only noticed his comment about get requests after posting my answer.
I find the following structure helpful, and allows me to style the text as a span rather than having to wield an object:
function append_url_content_to_div(url){
$.get(url, function(returned_data){
console.dir(returned_data);
var content = '<span>'+returned_data+'</span>';
$("#appendee_div").append(content);
});
}
append_url_content_to_div("https://dl.dropbox.com/s/euk874r7zd1cx0d/example_text.txt?dl=0"); //note that it has to be "dl." not "www." in dropbox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appendee_div"></div>
It works for me for dropbox content, but I don't see why it wouldn't work for publicly viewable text files. As you can see in the code, you need jquery.
I found the best way to insert HTML5 code into a website is to save the code onto a new text document and embed that document using . Then you can format the code using css and divs.
Just use php. Change the html format to php and use
echo file_get_contents("name_of_the_file.txt");
Simple as that.
You must use php because you have to output your text on the server side unless the info will not be shown to the client.
I think is the easiest way to do what you want.
Lets say I have example.html and inside that i have a code like
<iframe src="x.com" id="x"></iframe>
from x.com, I would like to get everything inside
<div class="content">...</div>
into example.html inside
<div class="xCodes">ONTO HERE</div>
So I tried to get the elements inside x.com to show up on example.html and I heard it's not possible to access them for cross domain problems.
I was wondering if there was another way to retrieve HTML tags from x.html into example.html
Maybe without using <iframe />??
Sourced from: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
$('.xCodes').load('http://x.com/x.html');
OR
$.ajax({
url: 'http://x.com/x.html',
type: 'GET',
success: function(res) {
var data = $(res.responseText).find('.content').text();
$('.xCodes').html(data);
}
});
If I understand correctly you want to rip the content from a DIV on one site and display it on another. There are several issues with this, but I'll focus on the technological aspect and assume you are acting in good faith with pulling the content.
The real issue you're running up against here is that you don't have access to DOM elements of pages that haven't loaded yet. As such you need to tell the browser to load the data for that page so that you can access the elements that should have loaded on the page and then pull the information out. JQuery has a nice little method to help with that called .load() (http://api.jquery.com/load/).
As an important side note however you can't do this as all modern broswers forbid cross site access in such a manner:
From the JQuery .load() page:
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
And check out:
http://en.wikipedia.org/wiki/Same_origin_policy
One more bit of warning. If you don't control the code on the other site you are potentially exposing yourself to serious security issues so only do this in situations where you have control of the other site or for some reason have absolute faith in that site. Alternatively you should try to, if available, use APIs for the sites/services you are trying to get data from.
I would like to know if there is an alternative to iFrames with HTML5.
I mean by that, be able to inject cross-domains HTML inside of a webpage without using an iFrame.
Basically there are 4 ways to embed HTML into a web page:
<iframe> An iframe's content lives entirely in a separate context than your page. While that's mostly a great feature and it's the most compatible among browser versions, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, insanely frustrating to script into/out of, nearly impossible to style).
AJAX. As the solutions shown here prove, you can use the XMLHttpRequest object to retrieve data and inject it to your page. It is not ideal because it depends on scripting techniques, thus making the execution slower and more complex, among other drawbacks.
Hacks. Few mentioned in this question and not very reliable.
HTML5 Web Components. HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes HTML, CSS, JavaScript or anything else an .html file can contain. This makes it a great solution with many interesting use cases: split an app into bundled components that you can distribute as building blocks, better manage dependencies to avoid redundancy, code organization, etc. Here is a trivial example:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
Native compatibility is still an issue, but you can use a polyfill to make it work in evergreen browsers Today.
You can learn more here and here.
You can use object and embed, like so:
<object data="http://www.web-source.net" width="600" height="400">
<embed src="http://www.web-source.net" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>
Which isn't new, but still works. I'm not sure if it has the same functionality though.
object is an easy alternative in HTML5:
<object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html">
Alternative Content
</object>
You can also try embed:
<embed src="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width=200
height=200
onerror="alert('URL invalid !!');" />
Re-
As currently, StackOverflow has turned off support for showing external URL contents, run code snippet is not showing anything. But for your site, it will work perfectly.
No, there isn't an equivalent. The <iframe> element is still valid in HTML5. Depending on what exact interaction you need there might be different APIs. For example there's the postMessage method which allows you to achieve cross domain javascript interaction. But if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do.
If you want to do this and control the server from which the base page or content is being served, you can use Cross Origin Resource Sharing (http://www.w3.org/TR/access-control/) to allow client-side JavaScript to load data into a <div> via XMLHttpRequest():
// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('displayDiv').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();
Now for the lynchpin of this whole operation, you need to write code for your server that will give clients the Access-Control-Allow-Origin header, specifying which domains you want the client-side code to be able to access via XMLHttpRequest(). The following is an example of PHP code you can include at the top of your page in order to send these headers to clients:
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>
This also does seem to work, although W3C specifies it is not intended "for an external (typically non-HTML) application or interactive content"
<embed src="http://www.somesite.com" width=200 height=200 />
More info:
http://www.w3.org/wiki/HTML/Elements/embed
http://www.w3schools.com/tags/tag_embed.asp
An iframe is still the best way to download cross-domain visual content. With AJAX you can certainly download the HTML from a web page and stick it in a div (as others have mentioned) however the bigger problem is security. With iframes you'll be able to load the cross domain content but won't be able to manipulate it since the content doesn't actually belong to you. On the other hand with AJAX you can certainly manipulate any content you are able to download but the other domain's server needs to be setup in such a way that will allow you to download it to begin with. A lot of times you won't have access to the other domain's configuration and even if you do, unless you do that kind of configuration all the time, it can be a headache. In which case the iframe can be the MUCH easier alternative.
As others have mentioned you can also use the embed tag and the object tag but that's not necessarily more advanced or newer than the iframe.
HTML5 has gone more in the direction of adopting web APIs to get information from cross domains. Usually web APIs just return data though and not HTML.
I created a node module to solve this problem node-iframe-replacement. You provide the source URL of the parent site and CSS selector to inject your content into and it merges the two together.
Changes to the parent site are picked up every 5 minutes.
var iframeReplacement = require('node-iframe-replacement');
// add iframe replacement to express as middleware (adds res.merge method)
app.use(iframeReplacement);
// create a regular express route
app.get('/', function(req, res){
// respond to this request with our fake-news content embedded within the BBC News home page
res.merge('fake-news', {
// external url to fetch
sourceUrl: 'http://www.bbc.co.uk/news',
// css selector to inject our content into
sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
// pass a function here to intercept the source html prior to merging
transform: null
});
});
The source contains a working example of injecting content into the BBC News home page.
You can use an XMLHttpRequest to load a page into a div (or any other element of your page really). An exemple function would be:
function loadPage(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}
If your sever is capable, you could also use PHP to do this, but since you're asking for an HTML5 method, this should be all you need.
The key issue to load another site's page in your own site's page is security. There is cross-site security policy defined, you would have no chance to load it directly in your iframe if another site has it set to strict same origin policy. Hence to find an alternative to iframe, they must be able to bypass this security policy restriction, even in the future, if any new component is introduced by WSC, it would have similar security restrictions.
For now, the best way to bypass this is to simulate a normal page access in your logic, this means AJAX + server side access maybe a good option. You can set up some proxy at your server side and fetch the page content and load it into the iframe. This works but not perfect as if there is any link or image in the content and they may not be accessible.
Normally if you try to load a page in your own iframe, you would need to check whether the page can be loaded in iframe or not. This post gives some guidelines on how to do the check.
You should have a look into JSON-P - that was a perfect solution for me when I had that problem:
https://en.wikipedia.org/wiki/JSONP
You basically define a javascript file that loads all your data and another javascript file that processes and displays it. That gets rid of the ugly scrollbar of iframes.