- The location of an external website
- The element within that location which contains content you would like to insert in yours
Showing posts with label external. Show all posts
Showing posts with label external. Show all posts
Wednesday, 6 April 2016
jQuery plugin to insert external content
This jQuery plugin takes 2 parameters:
Friday, 17 June 2011
External web content in your page through the PHP Simple HTML DOM Parser
The excellent PHP Simple HTML DOM Parser, provides the opportunity to bring external content into your web pages.
Here is an example of taking the top news story from the BBC website.
See demo.
<?php
include'simple_html_dom.php';
$html = file_get_html('http://www.bbc.co.uk/news/uk/');
foreach($html->find('#top-story') as $e)
{
echo $e->innertext . '<br />';
}
?>
Here is an example of taking the top news story from the BBC website.
See demo.
<?php
include'simple_html_dom.php';
$html = file_get_html('http://www.bbc.co.uk/news/uk/');
foreach($html->find('#top-story') as $e)
{
echo $e->innertext . '<br />';
}
?>
Tuesday, 12 October 2010
Put external web content into your page using jQuery and PHP
I looked into using the jQuery .load and .get methods to do this, but it only seemed to work with content on my server. I knew that PHP had a really good function called file_get_contents, so I thought, I'll use that, but jQuery is still good for putting the contents into your page. Here is an example of how they work together to achieve the goal.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
Subscribe to:
Posts (Atom)