Yisrael tried to help me about this, maybe someone else would succeed.
Since I can not add an Iframe to a dynamic page and load it into an HTML component, I am trying to modify the Iframe (each Iframe loads an online game).
I have a list of Iframes, they are all written the same way except for the names. for example:
In this case, it is “zombie-choppa”.
I was thinking to add a code to the HTML component that will take the page title or text element, which is also equal to “zombie-choppa” and will put it into the Iframe (so each page has its own name).
Like this:
<div class="miniclip-game-embed" data-game-name= **"'+document.title+'"** ......
I tried this manually in HTML component, but it is not working.
Hi,
This is the code for the HTML component:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="gameContainer">
</div>
<script>
var gameLoaded = false;
if (typeof build_miniclip_game !== "function") {
var build_miniclip_game = function () {
var l = document.querySelectorAll("#miniclip-game-embed, .miniclip-game-embed");
if (l.length > 0) {
var e = 750;
var b = 500;
var g = ["8-ball-multiplayer-pool"];
var c = ["en", "es", "fr", "pt", "cn", "se", "de", "in", "ro", "br", "tr", "pl", "ru", "jp", "it", "hu", "kr"];
var m = "";
var d = "";
var q = "";
var j = "";
var a = "";
var n = "";
var p = "";
var h = "";
for (var o = 0, f = l.length; o < f; o++) {
var r = l[o];
m = r.getAttribute("data-game-name");
n = r.getAttribute("data-language");
d = r.getAttribute("data-theme");
q = r.getAttribute("data-width");
j = r.getAttribute("data-height");
a = r.getAttribute("data-credits");
p = r.getAttribute("data-source");
h = r.getAttribute("data-campaign");
var s = "";
if (h && p) {
s = "&utm_source=" + p + "&utm_medium=wp-games=plugin&utm_campaign=" + h
}
if (g.indexOf(m) !== -1) {
if (q < e) {
q = e
}
if (j < b) {
j = b
}
}
if (!d) {
d = 1
}
if (d.indexOf("#") !== -1) {
d = d.replace("#", "color/")
}
if (!n) {
n = "en"
}
n = n.toLowerCase();
if (c.indexOf(n) === -1) {
n = "en"
}
var k = '<iframe src="//www.miniclip.com/games/' + m + "/" + n + "/webgame.php?bodybg=" + d + "&width=" + q + "&height=" + j + "&forcecredits=" + a + s + '" width="' + q + '" height="' + j + '" frameborder="0" scrolling="no" style="border:none;" allowfullscreen></iframe>';
r.innerHTML = k
}
}
};
}
</script>
<script>
window.onmessage = event => {
const gameContainer = document.querySelector('#gameContainer');
if (event.data) {
let nameOfGame = event.data; // The name of game
const divOfGame = `<div class="miniclip-game-embed" data-game-name="${nameOfGame}" data-theme="5" data-width="1500" data-height="500"
data-language="en"></div>`;
if (!gameLoaded && nameOfGame) {
gameContainer.innerHTML = divOfGame;
build_miniclip_game();
gameLoaded = true;
}
}
}
</script>
</body>
</html>
In the Dynamic page the HTML component is expecting a postMessage method with a string, for example:
$w('#yourHtmlComponent').postMessage('zombie-choppa');
My suggestion is to use getCurrentItem method in onReady function and post it to the HTML component.
For more information:
Good luck!
Roi.
Roi, I tried to do this now, but it’s not working for me.
I think I’m missing something here.
Can you help me to get it work on my site?
If I want to add 500 games, I have to find a solution to this, creating different pages for each game is taking too much work.