Question

我想在按下按钮时启用java脚本。例如，java脚本是 -

<div id="miniclip-game-embed" data-game-name="upipe-skateboard" data-theme="1" data-width="600" data-height="457"></div>
<script src="http://www.miniclip.com/js/game-embed.js"></script>

当我点击U管道按钮时，应启用此java脚本按钮和启用代码应该是html

Answer 1

此元素在div中编写iframe。

您可以创建一个优秀的div，如果您下载并修改了game-embed.js（iframe元素），该事件将始终触发。

<div style="position: relative;">
  <div style="position: absolute; z-index: 1000; width: 600px; height: 457px;" onclick="this.style.display='none'; /* put your action */"></div>
  <div style="position: absolute; z-index: 900;" id="miniclip-game-embed" data-game-name="upipe-skateboard" data-theme="1" data-width="600" data-height="457"> </div>
  <script src="http://www.miniclip.com/js/game-embed.js"> </script>
</div>

试试这个！

Answer 2

这是你可以尝试的东西。

首先，您可能需要某种可重用的脚本注入器。下面是一个将URL作为参数并加载位于该URL的脚本的示例。

function injectScript(src) {
    var scriptElement = document.createElement('script');

    scriptElement.type = 'text/javascript';
    scriptElement.language = 'javascript';
    scriptElement.src = src;

    document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

接下来，您可能不仅需要启用游戏，还需要启用<div>容器来显示它。所以这里有一个小助手，您可以根据自己的喜好进行自定义：

function enableTheGame(containerId, scriptSource) {
    var container = document.getElementById(containerId);
    if (container) {
        container.className = 'enabled'; // can be anything, e.g. style.display='block'
        injectScript(scriptSource); // here's our injector
    }
}

现在，只要你的按钮有一个id，就让它附加一个启用游戏的事件监听器。请注意，等待页面完成加载非常重要。

window.addEventListener('load', function () {
    var button = document.getElementById('SomeButton');
    if (button) {
        button.addEventListener('click', function () {
            enableTheGame('miniclip-game-embed', 'http://www.miniclip.com/js/game-embed.js');
        });
    }
});

可以改进上述示例。例如，最后一个函数可以查看按钮的data-...属性，并确定要加载的脚本和位置。

如何在单击按钮时启用javascript（html）

2 个答案: