6 Replies - 25829 Views - Last Post: 25 December 2012 - 12:01 PM

#1 mshadow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 03-July 12

div working like an iframe

Posted 02 November 2012 - 05:41 AM

hi guys...
how to make my div work like an iframe...
like in an iframe when a hyperlink is clicked the page associated loads inside the iframe....

any ideas how to make my div work like that
Is This A Good Question/Topic? 0
  • +

Replies To: div working like an iframe

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: div working like an iframe

Posted 02 November 2012 - 07:16 AM

Hello mshadow,

Quick question: Why? Why do you want a DIV to work like an IFRAME?

Now, as I am here to help, not to question, on with the code! For this we need to delve into some Javascript and to make things a lot easier and cross-browser compatible I will be using jQuery as well.

Let's assume the code below is your DIV in which will act like an IFRAME.

<div id="magicBox"></div>


Now we need need a Javascript function that we can trigger to render content inside this thing. (Don't forget to include the jQuery library)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
	function OpenPage(url)
	{
		$.get(url, function(response)
		{
			$('#magicBox').html(response);
		});
	}
</script>


Now all we need to do is call OpenPage(page) and it shall do it's magic.

<a href="#" onclick="OpenPage('anotherPage.html');">Go to my other page..</a>


Please keep in mind that the function is restricted by the same origin policy therefore the page must be under the same protocol/domain/port etc.

This post has been edited by Kruithne: 02 November 2012 - 07:16 AM

Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,239
  • Joined: 08-June 10

Re: div working like an iframe

Posted 03 November 2012 - 01:58 PM

one important addition: should anotherPage.html be a full HTML document, this will result in invalid HTML code (there are no two <html> elements allowed), hence the result may yield unwanted behaviour.
Was This Post Helpful? 0
  • +
  • -

#4 mshadow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 03-July 12

Re: div working like an iframe

Posted 21 December 2012 - 12:47 AM

View PostKruithne, on 02 November 2012 - 07:16 AM, said:

Hello mshadow,

Quick question: Why? Why do you want a DIV to work like an IFRAME?

Now, as I am here to help, not to question, on with the code! For this we need to delve into some Javascript and to make things a lot easier and cross-browser compatible I will be using jQuery as well.

Let's assume the code below is your DIV in which will act like an IFRAME.

<div id="magicBox"></div>


Now we need need a Javascript function that we can trigger to render content inside this thing. (Don't forget to include the jQuery library)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
	function OpenPage(url)
	{
		$.get(url, function(response)
		{
			$('#magicBox').html(response);
		});
	}
</script>


Now all we need to do is call OpenPage(page) and it shall do it's magic.

<a href="#" onclick="OpenPage('anotherPage.html');">Go to my other page..</a>


Please keep in mind that the function is restricted by the same origin policy therefore the page must be under the same protocol/domain/port etc.


it opened a php page in the div.....but when the linked in the php page was clicked .......it redirected to a different page.......
Was This Post Helpful? 0
  • +
  • -

#5 mshadow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 03-July 12

Re: div working like an iframe

Posted 25 December 2012 - 11:01 AM

hi guys,

<div id="apDiv1"><a href="#">first link</a></div>


now using jquery i am able to load a php page "two.php" in the div....but when i click the links in two.php it redirects to a different page which is supposed to happen. so i want to make my div work like an iframe......
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: div working like an iframe

Posted 25 December 2012 - 11:39 AM

An <iframe> is more or less a second browser tab, embed into the first tab. Browsing withing the <iframe> doesn't affect the main page.

If you load the contents of a page into a div using jQuery, on the other hand, it will become a part of the contents of the first tab, and anything that happens to that content happens as if it is happening to the main page. (Which it is.)

If you want links within the loaded content to reload the contents of those links inside the div, simulating an <iframe>, then you must do so by capturing the events of the links and loading them again into the div, like you originally did. Something along the lines of this:
function loadPageIntoDiv(url) {
    var $div = $("div#contentDiv");
    $div.load(url, function() {
        // Set the links in the newly loaded content
        // up to call this function again, rather than
        // doing what they would usually do.
        $div.find("a").on("click", function(evt) {
            var $link = $(this);
            loadPageIntoDiv($link.attr("href"));
            evt.preventDefault();
            return false;
        });
    });
}

// Load some initial content.
loadPageIntoDiv("pages/index.html");


Note, however, that this is far from perfect. It only redirects normal links to load again in the div. Any Javascript or CSS changes made by the loaded content will still affect the main page, so make sure you know what you are loading!
Was This Post Helpful? 1
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: div working like an iframe

Posted 25 December 2012 - 12:01 PM

I've merged your two threads on this issue. Please don't double post your questions!
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1