why this script won't work?

Question

Well what I need is a script what works as follow,

Each new time the page opens, the iframe has to pick 1 of the 50 link to show randomly as possible. Now I did some research and I make the following script. It works on JS(dot)DO but it won't work on jsbin and when I try Chrome it wont work. So i need a little help with it, I hope someone can help me with it!

<iframe id="frame"></iframe>
        <script>
            (function() {
                var e = document.getElementById('frame'),
                    f = function( el, url ) {
                        el.src = url;
                    },
                    urls = [           
                    'link1',
                      // all links 1/50
                    'link50'],
                    i = 0,
                    l = urls.length;
             f( e, urls[Math.round(Math.random()*50)] );
             })();


        </script>

(sorry for the bad English, It's not my main language

I would have suggested to use the variable `l` and replace `Math.round` by `Math.floor`: `f(e, urls[Math.floor(Math.random() * l)]);`. — Sebastian Simon, Dec 02 '15 at 10:00
@Xufox `urls[Math.floor(Math.random()*(l-1))]` is more correct because the index 50 doesn't exist — R3tep, Dec 02 '15 at 10:02
@R3tep No. `Math.random()` can’t ever reach `1`, but will always be below it. When you multiply it by `l`, the number will always be less than `l` and if you then floor it, it will still be less than `l`. — Sebastian Simon, Dec 02 '15 at 10:03
I tryed the change but still the same result. I doensn't understand why one of the online script editor run it right and the other wont work right, — nederlandb0y, Dec 02 '15 at 10:21

score 0 · Answer 1 · edited May 23 '17 at 11:59

Well, first of all you can't simply open any link in <iframe> due to browser security restrictions. You can read more at How to show google.com in an iframe?.

Now let's talk about the code itself.

<iframe id="frame"></iframe>
    <script>
        (function() {
            var e = document.getElementById('frame'),
                f = function( el, url ) {
                    el.src = url;
                },
                urls = [           
                'link1',
                  // all links 1/50
                'link50'],
                i = 0,
                l = urls.length;
         f( e, urls[Math.round(Math.random()*50)] );
         })();


    </script>

Why do you set the i variable? You do not use it in your code, and can delete it. Why do you multiple Math.random() by 50 if you have l. Multiply it by l it's more convenient. Consider this example:

<div id="divID"></div>
<script type="text/javascript">
  var e = document.getElementById('divID'),
  f = function( el, url ) {
      el.innerHTML = url;
  },
  urls = ['https://www.google.ru/', 'https://www.yandex.com/', 'http://www.bing.com/', 'https://www.yahoo.com/', 'https://duckduckgo.com/'],
  urlsLength = urls.length;
  f( e, urls[Math.floor( Math.random() * urlsLength )] );
</script>

You can check working example at http://jsfiddle.net/tfno031a/ (Just press the Run button in the upper left corner). You have to slightly modify it to load content into <iframe> (if you do have local urls). I hope this will help you. Good luck!

EDIT

Working example. I have a 1.html file in the same directory with the main file. Also pay attention to Math.floor(), I was careless in the beginning.

<iframe id='iframeID'></iframe>
<script type="text/javascript">
  var e = document.getElementById('iframeID'),
  f = function( el, url ) {
    el.src = url;
  },
  urls = ['1.html'],
  urlsLength = urls.length;
  window.onload = f( e, urls[Math.floor( Math.random() * urlsLength )] );
</script>

i see now, thats much better but still i don't understand when i put a link in a iframe it works and when i add a link with the script it won't work, thats the last thing i need. with the div it works fine but only the iframe wont work for now — nederlandb0y, Dec 02 '15 at 11:11
@nederlandb0y Several things I think might be wrong: 1. You didn't change innerHTML to src. 2. There is a wrong id. 3. Your DOM loads after the javascript. Set "on document ready" trigger to test it. 4. You use wrong path to the html file. — Georgy, Dec 02 '15 at 11:22
I still not understand i try but <script> $('document').ready(function(){}); var e = document.getElementById('frame') f = function( el, url ) { el.scr = url; }, urls = ['http://test.com','http://test.com', 'http://test.com', 'http://test.com', 'http://test.com', 'http://test.com',], urlsLength = urls.length; f( e, urls[Math.round( Math.random() * urlsLength )] ); </script> — nederlandb0y, Dec 02 '15 at 15:00
@nederlandb0y would you please take a look at the edit section? Works for me. — Georgy, Dec 02 '15 at 17:07

why this script won't work?

1 Answers1