CODEWITHSUNDEEP
javascriptphpjqueryhtmliframe
user3540090
user3540090

Reputation: 21

how to show the content of other websites in my website

I am looking for a code which does a simple task. below is the task

let's say my site is http://www.url.com

I want when my user go to this site they see a box on top of the page which shows my site name and also my contact details and also a countdown timer.

below this line I want to show the exact same website of few different URL and I want to set a timer as well so that these few websites rotate and that timer on top shows how long it is until the next refresh and next website. I want only this part of the webpage to refresh and I want the top line to be still.

http://i58.tinypic.com/s6t84h.jpg

you can see what I want in the image above.

I was told that it can be done using iframe but I don't know how to do it and I also don't want scroll

I appreciate if you could help me

I found this solution and it seems to be working. I just need the countdown timer and also I want to crop out let's say 200px of top of each website and like shift it up because one page doesn't show all the content I want unless using scrolling and I don't want that.

    <!DOCTYPE html>
    <html>
    <body>

    <div align="center" style="border:4px solid red ">
    <div style="color:#0000FF">
    <h3>some content<color:#0000FF/h3>
<h3>some more content<color:#0000FF/h3>
</div> 
</div>

<iframe id="rotator" src="http://www.zcast.ir" width="100%" height="600" scrolling="no" border="0" ></iframe>

<script>
// start when the page is loaded
window.onload = function() {

var urls = [
"http://www.zcast.ir",
"http://www.tgju.org",
"http://www.on3.ir", 
"http://www.goldinfo.ir",
"http://www.zarban.ir",
];

  var index = 1;
  var el = document.getElementById("rotator");

  setTimeout(function rotate() {

    if ( index === urls.length ) {
  index = 0;
}

el.src = urls[index];
index  = index + 1;

// continue rotating iframes
setTimeout(rotate, 5000);

}, 5000); // 5000ms = 5s
 };
</script>

</body>
</html>

Upvotes: 1

Views: 12597

Answers (2)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You can use iframe but, be sure that target website may disallow iframe embed. You can use following code;

var websites = new Array(
    "http://www.hurriyet.com",
    "http://www.milliyet.com",
    "http://www.amazon.com"
);
var counter = 0;
var sTimeOut = setInterval(function () {
    var index = counter%(websites.length);

    $("#website_div").html($('<iframe src="' + websites[index] + '" width="500" height="500" border="0" scrolling="no"/>' ));
    counter++;  
}, 5000);

Put your websites in list, and it will rotated.

Here is a working demo: Demo

Upvotes: 1

Fariz Azmi
Fariz Azmi

Reputation: 723

Yes absolutely you can do that using iframe

1) set iFrame scrolling attribute to no:

<iframe src="/default.asp" width="200" height="200" scrolling="no">
</iframe>

read more: iFrame attr (w3Schools)

2) setTimeout for the timer: - see more
3) Reload the iframe from parent window - see more

You can use style position:fixed; and top:0; to place the div on top of your page:

<div style="position:fixed;top:0;"> some content here </div>

so thats it! :)

Upvotes: 1

Related Questions