我试图打开被分配IFRAME SRC给一个变量，当页面初始加载它应该显示在页面上只有两个按钮，当我点击按钮不同的iframe窗口，一个iframe应取决于哪个按钮被按下获取加载，我试图做这样的事情创建按钮和创建内部框架，但它不工作
<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>
你只需要改变点击的iframe src属性。 我添加在src到usind数据属性的按钮。 这里是例子http://jsfiddle.net/8wLm42ns/2/的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);
});
对于JavaScript的解决方案试试这个http://jsfiddle.net/8wLm42ns/3/
该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 - 添加在头节
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，无需jQuery的网页。
JSBIN这里http://jsbin.com/gebelatomiya/1/
<!doctype html>
<html>
<head>
<script>
function loadFrame (elm){
var frame1 = document.getElementById('frame1');
frame1.src = elm.dataset.src;
}
</script>
</head>
<body>
<button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button>
<button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button>
<iframe id="frame1" scrolling="no"></iframe>
</body>
</html>
