问题:

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>

回答1:

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>

回答2:

<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>