0

我想在按下按钮时启用 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 中

4

2 回答 2

0

这是你可以尝试的东西。

首先，您可能需要某种可重用的脚本注入器。下面是一个将 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-...属性并决定加载哪个脚本以及加载到哪里。

于 2013-04-02T13:25:52.690 回答
0

此元素在 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>

尝试这个！

于 2013-04-02T13:11:36.090 回答