Сложная задача: открытие сайтов по кругу в фрейме, используя кнопку
Привет знатоки! :)
На родительской странице есть кнопка: <input type="button" class="button4" value="Следующий сайт"> Как реализовать открытие сайтов этой кнопкой, в фрейме , по порядку. Например таких yandex.ru google.com yahoo.com rambler.ru Нажимаем кнопку первый раз - открывается в фрейме yandex.ru , нажали второй раз открывается в этом фрейме - google.com вместо яндекса и так далее, по кругу. На пятый раз открывается yandex.ru |
Можно к примеру так
<iframe src="http://javascript.ru/" id="fr" name="leftFrame"></iframe> <button id="but">Новый фрейм</button> <script> var button = document.getElementById('but'), iframe = document.getElementById('fr'), arr = ['http://javascript.ru/', 'https://webref.ru', 'http://htmlbook.ru']; count = 1; button.addEventListener("click", function(){ if (count == arr.length) { count = 0}; iframe.src = arr[count]; count++; }); </script> В массив добавляете сколько угодно сайтов Но следует учесть что сайты могут запрещать показ во фрейме - к примеру указанные в задаче поисковики запрещают. Так что получится это сделать но не со всеми сайтами. |
Спасибо за ответ, кнопка работает! Но есть проблема, на странице уже есть фрейм, в котором отображаются сайты , который пользователь выбирает в выпадающем меню (организованно с помощью <form> ) , расположенном на родительской странице. А как привязать эту кнопку, делать то же самое, отображать в том же окне фрейма, при нажатии на кнопку).
, я ваш пример переделал под себя. кнопка работает но отображается 2 окна фрейма Вот код существующего фрейма, вместе с тем примером что вы показали, не могу найти, где я сделал ошибку :blink: : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>All books</title> <meta name="description" content="All books"/ > <meta name="keywords" content="All books"/ > <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> </head> <body background=zadniy_fon3.jpg> <input id="but1" type="button" class="button4" value="Следующий сайт >"> <iframe name="site" width="100%" height="700" src="http://javascript.ru/"></iframe> <script> var button = document.getElementById('but1'), iframe = document.getElementById('fr'), arr = ['http://javascript.ru/', 'https://webref.ru', 'http://htmlbook.ru', 'http://proklondike.com', 'http://forcoder.ru', 'https://habrahabr.ru', 'http://progbook.ru/', 'http://lifehacker.ru', 'http://aldebaran.ru']; count = 1; button.addEventListener("click", function(){ if (count == arr.length) { count = 0}; iframe.src = arr[count]; count++; }); </script> <caption></caption> <tr> <th> <form id="book" > <select id="mymenu" onchange="top.site.location.href = this.options[this.selectedIndex].value;"> <optgroup label="group1"> <option value="http://javascript.ru/" target="site">javascript </option> <option value="https://webref.ru" target="site">webref</option> <option value="http://htmlbook.ru" target="site">htmlbook</option> </optgroup> <optgroup label="group2"> <option value="http://proklondike.com" target="site">proklondike</option> <option value="http://forcoder.ru" target="site">forcoder</option> <option value="https://habrahabr.ru" target="site">habrahabr</option> </optgroup> <optgroup label="group3"> <option value="http://progbook.ru/" target="site">progbook</option> <option value="http://lifehacker.ru" target="site">lifehacker</option> <option value="http://aldebaran.ru" target="site">aldebaran</option> </optgroup> </select> </form> </th> </tr> </table> <p><iframe name="site" width="100%" height="700" src="http://javascript.ru/"></iframe> </body> </html> |
Сделал что бы можно было из списка выбирать и кнопкой листать дальше
Только с разметкой разберитесь, там бардак немного. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>All books</title> <meta name="description" content="All books"/ > <meta name="keywords" content="All books"/ > <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> </head> <body background=zadniy_fon3.jpg> <iframe name="site" width="100%" height="700" src="http://javascript.ru/"></iframe> <caption></caption> <tr> <th> <form id="book" > <select id="mymenu"> <optgroup label="group1"> <option value="http://javascript.ru/" target="site">javascript </option> <option value="https://webref.ru" target="site">webref</option> <option value="http://htmlbook.ru" target="site">htmlbook</option> </optgroup> <optgroup label="group2"> <option value="http://proklondike.com" target="site">proklondike</option> <option value="http://forcoder.ru" target="site">forcoder</option> <option value="https://habrahabr.ru" target="site">habrahabr</option> </optgroup> <optgroup label="group3"> <option value="http://progbook.ru/" target="site">progbook</option> <option value="http://lifehacker.ru" target="site">lifehacker</option> <option value="http://aldebaran.ru" target="site">aldebaran</option> </optgroup> </select> <input id="but1" type="button" class="button4" value="Следующий сайт >"> </form> </th> </tr> </table> <script> var button = document.getElementById('but1'), iframe = document.getElementById('fr'), select = document.getElementById('mymenu'), options = select.getElementsByTagName('option'), count = select.selectedIndex; select.onchange = function(){ top.site.location.href = this.options[this.selectedIndex].value; count = this.options.selectedIndex; }; button.onclick = function(){ count++; if (count == options.length) { count = 0}; select.options[count].selected = true; select.onchange(); }; </script> </body> </html> </body> </html> |
Спасибо огромное! все работает как я хотел. + уважения вам и успехов!:)
|
Рано я радовался))) кнопка работала, в фрейме отображались сайты, как по выборке из выпадающего меню, так и при нажатии кнопки, но вдруг перестала кнопка работать хз, почему!. Подскажите в чем ошибка, вот полный код страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ротатор кранов Биткоин и Эфириум 2016</title> <meta name="description" content="Ротатор кранов Биткоин и Эфириум 2016"> <meta name="keywords" content="биткоин краны"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> <!--Google analytic--> <script type="text/javascript" async="" src="./Ротатор кранов Биткоин и Эфириум 2016_files/watch.js"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-65131844-8', 'auto'); ga('send', 'pageview'); </script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter37761835 = new Ya.Metrika({ id:37761835, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/37761835" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --><!--/U1AHEADER1Z--> </head> <body background=zadniy_fon3.jpg> <style> input.button4 { position: relative; top:55px; right:35px; float:right; display: inline-block; font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif; font-size: 1.7em; font-weight: 700; color: rgb(245,245,245); text-shadow: 0 -1px rgba(0,0,0,.1); text-decoration: none; user-select: none; padding: .3em 1em; outline: none; border: none; border-radius: 3px; background: #0c9c0d linear-gradient(#63CEFF, #005176); box-shadow: inset #00F7FF 0 -1px 1px, inset 0 1px 1px #B3FFFC, #3CABA6 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; text-shadow: black 1px 0px, black 1px 1px, black 0px 1px, black -1px 1px, black -1px 0px, black -1px -1px, black 0px -1px, black 1px -1px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px; } input.button4:hover { -webkit-animation-play-state: paused; animation-play-state: paused; cursor: pointer; } input.button4:active { top: 1px; color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); } @-webkit-keyframes pulsate { 50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;} } @keyframes pulsate { 50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;} } </style> <b> <p><span style="color:#FFD700"><span style="font-size:18px"><span style="font-family:comic sans ms,cursive"><strong><span style="background-color:#000000">Как настрить робота Робота для сбора сатошей, смотреть видео: </span></strong></span></span></span><span style="font-size:18px"><strong><a href="https://www.youtube.com/watch?v=uV0_hjHetKM">Жми сюда</a></strong></span></p> <p><span style="font-size:18px"><span style="font-family:comic sans ms,cursive"><strong><span style="color:#FFD700"><span style="background-color:#000000">Cкачать робота пишите сюда: </span></span><span style="font-size:18px"><a href="http://vk.com/mik777em" target="_blank">http://vk.com/mik777em</a></span></strong></span></span></p> </b> <input id="but1" type="button" class="button4" value="Следующий кран >"><table border="5" bordercolor="#FF0000" bgcolor="#FFC144" align="left" height="125"> <caption></caption> <tbody><tr> <th> <form id="bitcoin"> <select id="mymenu" onchange="top.freebonus.location.href = this.options[this.selectedIndex].value;"> <optgroup label="Лучшие Краны Биткоин"> <option value="http://freebitco.in/?r=1458506" target="freebonus">FreeBitcoin от 621сатош/каждые 60мин.</option> <option value="http://bonusbitcoin.co/?ref=0879C996881F" target="freebonus">Bonusbitcoin от 200сатош/каждые 15мин. </option> <option value="http://freedoge.co.in/?r=337534" target="freebonus">FreeDogecoin от 2.8 доджей /каждые 60мин.</option> <option value="http://moonbit.co.in/?ref=45fcf5c271bc" target="freebonus">MoonBitcoin от 40 сатош/каждые 5мин.</option> <option value="http://fieldbitcoins.com/?ref=wsw0uvek232885" target="freebonus">FieldBitcoin от 20 сатош/каждые 5мин.</option> </optgroup> <optgroup label="Краны Эфириум"> <option value="http://goo.gl/eKLNXK" target="freebonus">№1 Etherfaucet 190/05</option> <option value="http://goo.gl/2AEhg5" target="freebonus">№2 Fucether 850/05</option> <option value="http://goo.gl/vel5ef" target="freebonus">№3 Eth-faucet 497/05</option> <option value="http://goo.gl/fX8fG4" target="freebonus">№4 Faucetorg 1620/05</option> <option value="http://goo.gl/anb6I7" target="freebonus">№5 Ethereum 850/10</option> <option value="http://goo.gl/761cR2" target="freebonus">№6 Ether 641/10</option> <option value="http://goo.gl/oAEuyV" target="freebonus">№7 Faucether 1180/10</option> <option value="http://goo.gl/o4SWib" target="freebonus">№8 Myethtop 1300/10</option> <option value="http://goo.gl/6ABngz" target="freebonus">№9 Ethfree24 1900/10</option> </optgroup> <optgroup label="Краны Биткоин"> <option value="http://goo.gl/MFrPUi" target="freebonus">1 Mysatoshiweb 100/00:20секунд</option> <option value="http://bitcoinblast.tk" target="freebonus">2 BitcoinBLAST 100/01</option> <option value="http://goo.gl/mFdNp2" target="freebonus">54 Bitkrusty 100/720</option> <option value="http://goo.gl/WE6s81" target="freebonus">55 Mbalawyerbtc 300/800</option> <option value="http://goo.gl/EVOF9J" target="freebonus">56 Insurance 300/800</option> <option value="http://goo.gl/vCBvTG" target="freebonus">57 Bitcoinscity 50/900</option> <option value="http://goo.gl/7y2Y3Y" target="freebonus">58 Bear 250/1440</option> <option value="http://goo.gl/dXU15S" target="freebonus">59 Btc-100 100/1440</option> </optgroup> </select> </form> </th> </tr> </tbody></table> <script> var button = document.getElementById('but1'), iframe = document.getElementById('fr'), select = document.getElementById('mymenu'), options = select.getElementsByTagName('option'), count = select.selectedIndex; select.onchange = function(){ top.freebonus.location.href = this.options[this.selectedIndex].value; count = this.options.selectedIndex; }; button.onclick = function(){ count++; if (count == options.length) { count = 0}; select.options[count].selected = true; select.onchange(); }; </script> <iframe name="freebonus" width="100%" height="800" src="http://freebitco.in/?r=1458506"></iframe> </body></html> |
У вас просто кнопка за счет анимации уходит с поля зрения курсора и событие клик не срабатывает.
Сделал не ко клику а по нажатию кнопки мыши вниз. Вставьте этот код в теги script вместо текущего и добавьте во фрейм id="frame" var button = document.getElementById('but1'), iframe = document.getElementById('frame'), select = document.getElementById('mymenu'), options = select.getElementsByTagName('option'), count = select.selectedIndex; select.onchange = function(){ iframe.src = this.options[this.selectedIndex].value; count = this.options.selectedIndex; }; button.onmousedown = function(){ count++; if (count == options.length) { count = 0}; select.options[count].selected = true; select.onchange(); }; |
спасибо! все заработало! кнопка, которая улетала при нажатии- не срабатывала, в этом и была проблема. еще раз большое спасибо вам!:thanks:
|
Часовой пояс GMT +3, время: 07:23. |