Converting iframe code to jquery code

Question

I am using an Iframe to load the contents within an iframe every 5 seconds. It works fine. What happens is, it just keeps blinking every time it loads, which is bit annoying.

I want to convert the iframe code to scrolling div so the iframe src contents keep getting loaded every 5 seconds and the blinking should go away.

Here is my code:

My Home Page (INDEX.HTML) has:

<iframe src="messages.php#bottom" width="674" height="476" frameborder="0" name="main" allowtransparency="yes" scrolling="auto"/></iframe>

The Contents of Messages.php is like this

<html>
<head>
<script>
    window.onload = function() { setTimeout("window.location.href='messages.php';", 5000) }; // 5000 = 2 seconds (it's in milliseconds)
    </script>
</head>
<body>
<?php Application.logs ?>
</body>
</html>

I am trying to use this file:

https://gist.github.com/aklump/5470863 - but not able to spin my head around how to do it

ChippeRockTheMurph · Accepted Answer · 2017-04-25 23:11:22Z

2

You could put a meta refresh Tag in messages.php

<meta http-equiv="refresh" content="5">

OR you could use Javascript with setInterval to refresh the src of the Source...

<script>
window.setInterval("reloadIFrame();", 5000);

function reloadIFrame() {
 document.frames["frameNameHere"].location.reload();
}
</script>

EDIT:

Try adding this into index.html:

<script>
    // Prevent variables from being global      
    (function () {

      /*
          1. Inject CSS which makes iframe invisible
      */

    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] || 
              document.getElementsByTagName('script')[0];

    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

    ref.parentNode.insertBefore(div, ref);


    /*
        2. When window loads, remove that CSS, 
           making iframe visible again
    */

    window.onload = function() {
        div.parentNode.removeChild(div);
    }

})();
</script>

EDIT 2

Okay, remove all the previous code that you copied from here and try this instead:

<script>
$(function() {
    startRefresh();
});

function startRefresh() {
    setTimeout(startRefresh,5000);
    $.get('messages.php#bottom', function(data) {
        $('#content_div_id').html(data);    
    });
}
</script>

And then replace your iFrame with this:

<div id="content_div_id">
<iframe src="messages.php#bottom" width="674" height="476" frameborder="0" name="main" allowtransparency="yes" scrolling="auto"></iframe>
</div>

edited Apr 25, 2017 at 23:11

answered Apr 25, 2017 at 20:32

ChippeRockTheMurph

4553 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

user7921719 Over a year ago

where i need to define it, inside messages.php or outside in index.html file the <script> code

user7921719 Over a year ago

btw, the question is: even iff i make this script works, will the blinking go away, i think not, my concern was blinking should go away

ChippeRockTheMurph Over a year ago

@Initiater The meta tag has to go in the head section of messages.php and the script can basically go wherever you want in index.html. Try out the code and let me know whether it works or not.

user7921719 Over a year ago

okay, i tried and it has same behavior as iframe, blinking every 5 seconds, it do work, but blinking is still there

ChippeRockTheMurph Over a year ago

You tried both the meta tag in the head section of messages.php and the script in index.html?

|

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-26 15:58:11Z

Instead of using the iframe, use a <div> element. For example:

<div id="messageContainer"></div>

Then use jQuery's $.get() to trigger an AJAX request, though it could be argued that jQuery isn't needed (vanilla Javscript could be used with XMLHttpRequest - Read this site for more information about eliminating jQuery).

When the request to messages.php is finished, update the innerHTML of the container with the response (i.e. with .html()). Since jquery AJAX requests (e.g. called via $.get(), $.post(), etc.) return a jqXHR object, which implements the Promise interface (see deferred for more information). So .done() can be used to trigger a callback when the AJAX request is finished.

 $.get('messages.php')
    .done(function(response) {
            messageContainer = $('#messageContainer');
            messageContainer.html(response);
    });

Put that AJAX call in a function and use setInterval() to call a function every 5 seconds.

setInterval(requestMessage, 5000);

Additionally, the code below scrolls the container to the bottom using jQuery's scrollTop() method.

//ensure DOM has loaded before interacting with it
$(document).ready(function() {
   setInterval(requestMessage, 5000); 
   console.log('interval set - every 5 seconds');    
});
function requestMessage() {
    $.get('http://samonela.scienceontheweb.net/PHP/messages2.php')
        .done(function(response) {
                messageContainer = $('#messageContainer');
                messageContainer.html(response);
                //scroll container to the bottom
                messageContainer.scrollTop(messageContainer[0].scrollHeight);
                
                
        });
}

#messageContainer {
        height: 100px;
        overflow-y: auto;
        border: 2px solid #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messageContainer">
</div>

Collectives™ on Stack Overflow

Converting iframe code to jquery code

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related