如何使用CSS更改iframe的src
[英]How to change the src of an iframe with css
问题描述
I have this code and idk how to make it so when I click on the items in the "menu" to not redirect to other pages but to change the src of the iframe.. should I change the 
我有这段代码和idk如何做到这一点，所以当我单击“菜单”中的项目时，不要重定向到其他页面，而是要更改iframe的src。
Code: 码：
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
<a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br>
<a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br>
<a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br>
<a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a>
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
I'm still a starter in this domain so I really have no idea how should I modify the code to obtain what I intend to. 我仍然是这个领域的入门者，所以我真的不知道如何修改代码以获得我想要的东西。
5 个解决方案
解决方案1
2 已采纳 2014-09-29 14:36:13
You can simply add a target to your menu-items and a name to your iframe, like so: 您可以简单地在菜单项中添加目标 ，并在iframe中添加名称 ，如下所示：
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
Or did I missunderstand the question? 还是我误解了这个问题？
解决方案2
1 2014-09-29 14:31:46
css is a markup language, so you will not be able to do what you want with css. css是一种标记语言，因此您将无法使用css做您想做的事情。
However, you can give your iframe an id and change the source using javascript. 但是，您可以给iframe一个ID并使用javascript更改源。 This SO post explains it perfectly, I could not do a better job :p 这样的帖子很好地解释了它，我无法做得更好：p
解决方案3
0 2014-09-29 14:29:08
If you have jQuery (you should!) then you can do something like this: 如果您使用jQuery（应该使用！），则可以执行以下操作：
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
Since you want to cancel the href in the <a> tags, why not remove them completely and replace them with <div> tags? 由于要取消<a>标记中的href ，为什么不完全删除它们并用<div>标记替换它们？
解决方案4
0 2014-09-29 14:31:17
Its not Css code, its a JS code. 它不是Css代码，而是JS代码。
you need to to connect you items to an event listner take the href value on put it on the iframe //jquery on load mathod// 您需要将商品连接到事件列表器，将href值放在iframe上//将jquery加载到负载上///
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
解决方案5
0 2014-09-29 14:31:27
You can't modify properties of DOM elements using css. 您不能使用css修改DOM元素的属性。 Use js/jQuery: 使用js / jQuery：
$(document).ready(function() { $("#menu a").click(function(e) { e.preventDefault(); //so browser will not follow link. $("#content iframe").attr("src", $(this).attr("href")); }); });
#header { background-color: black; color: white; text-align: center; padding: 5px; } #menu { background-color: #eeeeee; height: 470px; width: 200px; float: left; text-align: center; padding: 5px; } #content { float: left; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"> <h1> Movies Gallery</h1> </div> <div id="menu"> <a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br> <a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br> <a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br> <a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a> </div> <div id="content"> <iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe> </div> <div id="footer"> Copyright Andrew.Xd 2014 </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.