10.06.2016, 01:13
|
|
Новичок на форуме
|
|
Регистрация: 10.06.2016
Сообщений: 7
|
|
|
Сложная задача: открытие сайтов по кругу в фрейме, используя кнопку
Привет знатоки! 
На родительской странице есть кнопка:
<input type="button" class="button4" value="Следующий сайт">
Как реализовать открытие сайтов этой кнопкой, в фрейме , по порядку. Например таких
yandex.ru
google.com
yahoo.com
rambler.ru
Нажимаем кнопку первый раз - открывается в фрейме yandex.ru , нажали второй раз открывается в этом фрейме - google.com вместо яндекса и так далее, по кругу. На пятый раз открывается yandex.ru |
|
10.06.2016, 06:10
|
|
Профессор
|
|
Регистрация: 16.06.2013
Сообщений: 172
|
|
Можно к примеру так
<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>
В массив добавляете сколько угодно сайтов
Но следует учесть что сайты могут запрещать показ во фрейме - к примеру указанные в задаче поисковики запрещают. Так что получится это сделать но не со всеми сайтами. |
|
10.06.2016, 12:45
|
|
Новичок на форуме
|
|
Регистрация: 10.06.2016
Сообщений: 7
|
|
Спасибо за ответ, кнопка работает! Но есть проблема, на странице уже есть фрейм, в котором отображаются сайты , который пользователь выбирает в выпадающем меню (организованно с помощью <form> ) , расположенном на родительской странице. А как привязать эту кнопку, делать то же самое, отображать в том же окне фрейма, при нажатии на кнопку).
, я ваш пример переделал под себя. кнопка работает но отображается 2 окна фрейма
Вот код существующего фрейма, вместе с тем примером что вы показали, не могу найти, где я сделал ошибку  :
<!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>
|
|
10.06.2016, 14:44
|
|
Профессор
|
|
Регистрация: 16.06.2013
Сообщений: 172
|
|
Сделал что бы можно было из списка выбирать и кнопкой листать дальше
Только с разметкой разберитесь, там бардак немного.
<!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>
Последний раз редактировалось Bond, 10.06.2016 в 15:49.
|
|
12.06.2016, 19:21
|
|
Новичок на форуме
|
|
Регистрация: 10.06.2016
Сообщений: 7
|
|
Спасибо огромное! все работает как я хотел. + уважения вам и успехов! |
|
13.06.2016, 21:50
|
|
Новичок на форуме
|
|
Регистрация: 10.06.2016
Сообщений: 7
|
|
Рано я радовался))) кнопка работала, в фрейме отображались сайты, как по выборке из выпадающего меню, так и при нажатии кнопки, но вдруг перестала кнопка работать хз, почему!. Подскажите в чем ошибка, вот полный код страницы
<!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>
|
|
13.06.2016, 22:45
|
|
Профессор
|
|
Регистрация: 16.06.2013
Сообщений: 172
|
|
У вас просто кнопка за счет анимации уходит с поля зрения курсора и событие клик не срабатывает.
Сделал не ко клику а по нажатию кнопки мыши вниз.
Вставьте этот код в теги 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();
};
|
|
14.06.2016, 12:39
|
|
Новичок на форуме
|
|
Регистрация: 10.06.2016
Сообщений: 7
|
|
спасибо! все заработало! кнопка, которая улетала при нажатии- не срабатывала, в этом и была проблема. еще раз большое спасибо вам!  |
|
|
|
