How to display an iframe on button click

2019-05-24 08:53发布

I just want to know how can I display an iframe on button click

Here is my code:

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>

2条回答
兄弟一词,经得起流年.
2楼-- · 2019-05-24 09:22

At least in the Snippet you provided, you forgot to add a reference to JQuery. See it working now:

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楼-- · 2019-05-24 09:35
<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>
查看更多
登录 后发表回答