javascript - onclick加载/运行此代码

Question

我正在尝试创建一个 html 文件，该文件将在单击按钮时加载/运行以下代码。我已经尝试过这种方法如下。

            <!-- Custom -->
            <div id="custom1">

            </div>
            <script>
                function custom()
                {
                var dummy = '<div id="custom1" style="display: block; position: absolute; top: 0px; left: 0px; z-index: 9999900; width: 100%; opacity: 0.8; height: 768px; visibility: visible;" ></div>
                <div id="custom1" style="display: block; text-align: center; line-height: normal; visibility: visible; position: absolute; top: 0px; left: 0px; z-index: 9999910; width: 100%; height: 667px;" ><div id="close_button_div" align="center" style="position: absolute; width: 100%; z-index: 9999930;"></div><div style="background: transparent; height: 768px; z-index: 9999915;">
                    <iframe id="custom1" width="100%" height="768" id="overlay_iframe" src="" allowtransparency="true" frameborder="0" style="position: relative; height: 768px; overflow: hidden; z-index: 9999920; display: block; background-color: transparent;" scrollbars="NO" ></iframe>
                </div>
                </div>
                <div id="custom1" align="center" style="position: absolute; width: 100%; z-index: 9999930;" ></div>
                <div id="custom1" style="background: transparent; height: 768px; z-index: 9999915;" >
                    <iframe id="custom1" width="100%" height="768" id="overlay_iframe" src="captcha.php" allowtransparency="true" frameborder="0" style="position: relative; height: 768px; overflow: hidden; z-index: 9999920; display: block; background-color: transparent;" scrollbars="NO">
                    </iframe>
                </div>
            </div>';
                document.getElementById('custom1').innerHTML += dummmy;
                }
            </script>
            <!-- END custom-->

这是我用于按钮 onclick 的代码

<a href="#" onclick="custom();">DOWNLOAD</a>

它对我不起作用。

Answer 1

删除innerHTML后面的+。

function custom()
{
      var dummy = '<div id="custom1" style="display: block; position: absolute; top: 0px; left: 0px; z-index: 9999900; width: 100%; opacity: 0.8; height: 768px; visibility: visible;" ></div><div id="custom1" style="display: block; text-align: center; line-height: normal; visibility: visible; position: absolute; top: 0px; left: 0px; z-index: 9999910; width: 100%; height: 667px;" ><div id="close_button_div" align="center" style="position: absolute; width: 100%; z-index: 9999930;"></div><div style="background: transparent; height: 768px; z-index: 9999915;"><iframe id="custom1" width="100%" height="768" id="overlay_iframe" src="" allowtransparency="true" frameborder="0" style="position: relative; height: 768px; overflow: hidden; z-index: 9999920; display: block; background-color: transparent;" scrollbars="NO" ></iframe></div>
</div><div id="custom1" align="center" style="position: absolute; width: 100%; z-index: 9999930;" ></div><div id="custom1" style="background: transparent; height: 768px; z-index: 9999915;"><iframe id="custom1" width="100%" height="768" id="overlay_iframe" src="captcha.php" allowtransparency="true" frameborder="0" style="position: relative; height: 768px; overflow: hidden; z-index: 9999920; display: block; background-color: transparent;" scrollbars="NO">                 </iframe></div></div>';                    document.getElementById('custom1').innerHTML = dummmy;
}

演示:

http://jsfiddle.net/n70o70tz/