logo标签列表

点击按钮如何展示 iframe

javascriptjqueryhtmliframe
3

我想知道如何在按钮点击时显示一个iframe。

这是我的代码:

function postYourAdd () {
    var iframe = $("#forPostyouradd");
    iframe.attr("src", iframe.data("src")); 
}
<button id="postYourAdd" onclick="postYourAdd()">Button</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>

4个回答
9
至少在您提供的代码段中，您忘记添加对jQuery的引用。现在请看它正常工作： 

function postYourAdd () {
    var iframe = $("#forPostyouradd");
    iframe.attr("src", iframe.data("src")); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>

3
<body>
<p>This is IFrame</p>
    <button onclick="displayIframe()">Click me</button>
  <div id="iframeDisplay"></div>  

<script>
    function displayIframe() {
        document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"../HtmlPage1.html\" height=\"200\" width=\"300\" ></iframe>";

    }
</script>
</body>
2
虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。 - Derek Brown
0
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

<button id="postYourAdd" onclick="light()">OPEN</button>
<iframe id="forPostyouradd" src="" title="W3Schools Free Online Web Tutorials">
</iframe>

<script>
function light() {
    var iframe = $("#forPostyouradd");
    debugger;
    iframe.attr("src", "https://www.w3schools.com/java/default.asp"); 
}
</script>
</body>
</html>
0

function postYourAdd () {
    var iframe = $("#forPostyouradd");
    iframe.attr("src", iframe.data("https://www.google.com/")); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接