根据不同的按钮点击打开不同的iframe [英] Opening different iframe depending on different button click
本文介绍了根据不同的按钮点击打开不同的iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过将iframe src分配给一个变量来打开不同的iframe窗口，
当页面最初加载时应该只显示页面上的两个按钮，当我点击按钮时，iframe应该加载取决于哪个按钮被按下，我试着做这样的事情来创建按钮和创建iframe，但它不工作
< ;按钮id =b1>按钮1< /按钮>
< button id =b2>按钮2< /按钮>
< iframe scrolling =nosrc =whatnext>
< / iframe>
< script>
var b1 = document.getElementById（'b1'），b2 = document.getElementById（'b2'）;
var x =Hello！;
函数showX（）{
var whatnext;
if b1.onclick == true
whatnext =http://community.sitepoint.com/style =border：0px none; height：1555px; margin-left：-116px; margin-顶部：-25px;宽度：930px;
elseif b2.onclick = true
whatnext =http://community.sitepoint.com/style =border：0px none; height：555px; margin-left：-116px; margin-top ：-25px; width：330px;
}
< / script>
，另一项试用是
< button id =b1>按钮1< /按钮>
< button id =b2>按钮2< /按钮>
< / iframe>
< script>
var b1 = document.getElementById（'b1'），b2 = document.getElementById（'b2'）;
var x;
函数showX（）{
src =https：http：//stackoverflow.com;
b1.onclick = function（）{
x =http://stackoverflow.com;
showX（）;
};
b2 .onclick = function（）{
x =www.sitepoint.com;
showX（）;
};
< / script>
解决方案您只需要在点击时更改iframe的src属性，我添加了src到数据属性的按钮。
下面是示例 http://jsfiddle.net/8wLm42ns/ 2 /
HTML< button class =loadiframeid =b1data -src =http://jquery.com/data-width =500data-height =400>按钮1< / button>
< button class =loadiframeid = b2data-src =http://sitepoint.comdata-width =650data-height =350> Button 2< / button>
< iframe id = 'frame'frameborder =0scrolling =nowidth =500height =400>
<$ c $ （'click'，function（）{
var src = $（this）.data（'src'），
width = $（this）。 data（'width'），
height = $（this）.data（'height'）;
$（'＃frame'）。css（{
width：width，
height：height
}）。attr（'src'，src）;
}）;
对于javascript解决方案，试试这个 http://jsfiddle.net/8wLm42ns/3/
HTML
< div class =loadiframe>
< button id =b2data-src =http://sitepoint.comdata-width =650data-height =350> Button 2< / button>
< / div>
< iframe id ='frame'frameborder =0scrolling =nowidth =500height =400>
javaScript - 添加头部部分
function iframeChange（）{
var buttons = document.querySelector（。loadiframe），
iframe = document.getElementById（'frame'）;
buttons.addEventListener（click，function（e）{
iframe.src = e.target.dataset.src;
iframe.width = e.target.dataset .width;
iframe.height = e.target.dataset.height;
}）;
}
window.onload = iframeChange;
i am trying to open different iframe windows by assigning iframe src to a variable , when the page initially loads it should show only two buttons on the page , when i click on the button , an iframe should get loaded depending on which button is pressed , i tried doing something like this to create buttons and creating iframes , but it is not working
<button id="b1">Button 1</button> <button id="b2">Button 2</button> <iframe scrolling="no" src="whatnext"> </iframe> <script> var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); var x = "Hello!"; function showX() { var whatnext; if b1.onclick==true whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;" elseif b2.onclick=true whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;" } </script> and another piece of trial is <button id="b1">Button 1</button> <button id="b2">Button 2</button> <iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"> </iframe> <script> var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); var x ; function showX() { src="https:http://stackoverflow.com"; } b1.onclick = function() { x = "http://stackoverflow.com; showX(); }; b2.onclick = function() { x = "www.sitepoint.com"; showX(); }; </script>
解决方案You just need to change the src attribute of the iframe on click. I added the src to the buttons usind the data attribute. Here is the example http://jsfiddle.net/8wLm42ns/2/ The HTML
<button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button> <button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button> <iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">jQuery
$('.loadiframe').on('click', function(){ var src = $(this).data('src'), width = $(this).data('width'), height = $(this).data('height'); $('#frame').css({ width: width, height: height }).attr('src', src); });For javascript solution try this http://jsfiddle.net/8wLm42ns/3/
The HTML
<div class="loadiframe"> <button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button> <button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button> </div> <iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">javaScript - add in head section
function iframeChange() { var buttons = document.querySelector(".loadiframe"), iframe = document.getElementById('frame'); buttons.addEventListener("click", function (e) { iframe.src = e.target.dataset.src; iframe.width = e.target.dataset.width; iframe.height = e.target.dataset.height; }); } window.onload = iframeChange;
这篇关于根据不同的按钮点击打开不同的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
