Facebook and Unity3D JS injection difficulties - javascript

I'd like to display some HTML elements under my game on Facebook. Specifically, an image with a link to a website, but that's not the point of the question.
I understand what is required, and have successfully used the Application.ExternalEval() method, and the sample JS string provided by Facebook, to add some HTML text on top of the game itself.
I am following the information found on this page.
I have attempted the following permutations:
"var insertionPoint = body.children[0]; " + "body.insertBefore(headerElement, insertionPoint);";
"var insertionPoint = body.children[0]; " + "body.insertBefore(headerElement, insertionPoint.nextSibling);";
"var insertionPoint = body.children[1]; " + "body.insertBefore(headerElement, insertionPoint);";
After a couple of hours of frustrating trial and error, I have been unable to produce working JS injection code to display HTML immediately below the game itself on the canvas. Can someone help?

I've been trying to do the same frustrating thing for a minute, here's what I've arrived at, had to use different techniques for different browsers.
string injection = "if(navigator.userAgent.indexOf(\"Firefox\") >= 0){;" +
"var headerElement = document.createElement('div');" +
"headerElement.innerHTML = '<img src=\"URLTOSOURCE" style=\"width: 100%; text-align: center\" />';" +
"var body = document.getElementsByTagName('body')[0];" +
"var insertionPoint = body.lastChild;" +
"body.insertBefore(headerElement, insertionPoint);" +
"}else{;" +
"var headerElement = document.createElement('div');" +
"headerElement.innerHTML = '<img src=\"URLTOSOURCE" />';" +
"var body = document.getElementsByTagName('body')[0];" +
"var insertionPoint = body.children[0]; " +
"var unityPlayer = document.getElementById('unityPlayerEmbed');" +
"unityPlayer.parentNode.insertBefore(headerElement, unityPlayer.nextSibling);" +
"var embedTag = unityPlayer.getElementsByTagName('embed');" +
"embedTag[0].setAttribute('style','display:block;width:1200px;height:600px');" +
"};";
Application.ExternalEval(injection);

This should do the trick!
"var insertionPoint = body.lastChild;"
I post tricks and tutorials on my blog, check it out also for facebook sdk tutorials!
blog.bigfootgaming.net

Related

How to add target="_blank" into a document.write?

I am doing this on chrome dev tools. The error message I am getting is, "Can't open same-window link to "URL"; try target="_blank". I can't figure out how to incorporate that into this Javascript.
document.write=function(s){
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
lastScript.insertAdjacentHTML("beforebegin", s);
}
var txt = "Let's Start";
document.write("<p>Link: " + txt.link("beginning.html") , "_blank" + "</p>");
First: The link() method is not standard, and may not work as expected in all browsers.
Second: There is no correct way to do it with String object https://www.w3schools.com/jsref/jsref_link.asp
Third:
var link = "<a href='beginning.html' target='_blank'>Let's Start</a>";
document.write("<p>Link: " + link + "</p>");
Have you tried changing that to this line:
document.write("<p>Link: " + txt.link("beginning.html") , "_blank" + "</p>");
to
document.write("<p>Link: " + txt.link("beginning.html") + " _blank" + "</p>");
Strictly a guess as we assume .link() is returning a string (?)

This Javascript used to work, but now it doesn't

I've had this Javascript code on my web site for years and it worked. It is written to help filter out email spam bots;
<script type="text/javascript">
emailserver = "website.com" emailE = "Maria#" + emailserver document.write("<A href=" + "'mailto:" + emailE + "'>" + emailE + "</a>")
</script>
It hasn't worked for a while. Can anyone tell me what changed so that this no longer works? Thanks.
Works fine. You just forgot about semicolons ;.
By the way, you don't need the quotation marks " in the last line of your code (in the document.write() function).
emailserver = "website.com";
emailE = "Maria#" + emailserver;
document.write("" + emailE + "")

How to get Html code after javascript has modified it?

I want to get the HTML code of a webpage after it has been modified (similar to one that we see in inspect element tab of a browser) and I want to do it programatically (if possible using python or any other programming language). Can someone suggest how I might be able to proceed with this? I know its possible since browsers are able to do it.
As the server has no access to client window after client-side changes, you have to use client side languages.
In jquery:
var fullCode= "<html>" + $("html").html() + "</html>";
if you want also to include the Doctype:
var node = document.doctype;
var fullCode = "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>';
fullcode += "<html>" + $("html").html() + "</html>";
Thanks to this
Using JQuery you can achieve this by the following code
$(document).ready(function(){
var html = "<html>"+$('html').html()+"</html>";
});

WinJS forward custom object to print function

I use WinJS in my application and try to print some content. Made my printer class according to this tutorial https://dzone.com/articles/windows-8-print-contract-%E2%80%93.
function registerForPrintContract(participiantData) {
var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.addEventListener("printtaskrequested", onPrintTaskRequested, false);
}
function onPrintTaskRequested(printEvent) {
var printTask = printEvent.request.createPrintTask("Print Example", function (args) {
printCurrentPage(args);
printTask.oncompleted = onPrintTaskCompleted;
});
}
function printCurrentPage(args) {
var docHtml = document.createDocumentFragment();
docHtml.appendChild(createDocumentContent());
args.setSource(MSApp.getHtmlPrintDocumentSource(docHtml));
}
function createDocumentContent() {
var container = document.createElement("div");
container.innerHTML = "<h2>" + firstname + " " + lastname + "</h2>" +
"<h4>" + emailaddress1 + "<h4>";
return container;
}
function showPrintUI() {
Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
}
My problem is that I do not know how to forward some object data to createDocumentContent() function. In this example I put firstname, lastname and email. Those data I cannot get from html page I need to send them on print button click.
All examples I saw are about printing current page or making new content from data which we can get from HTML page by querying DOM, no example where I can send custom object.
What is the best way to do this ?
My problem is that I do not know how to forward some object data to createDocumentContent() function. In this example I put firstname, lastname and email. Those data I cannot get from html page I need to send them on print button click.
Do you mean you want to put the html output of "<h2>"+firstname + " " +lastname+"</h2>"+"<h4>" + emailaddress1 + "<h4>" to your print page?
The behavior of innerHTML has changed in Windows Store App Development.
see HTML and DOM API changes list innerHTML section:
Content is filtered as through it was processed by the toStaticHTML method
But WinJS offers a method that you can utilize to inject HTML.
Here is the link to documentation of this method: WinJS.Utilities.insertAdjacentHTML
Here is a code snippet that shows a simple use this method:
function createDocumentContent() {
var obj = {
firstname: "winffee",
lastname: "xia",
emailaddress1:"test#126.com"
}
var htmlString = "<h2>" + obj.firstname + " " + obj.lastname + "</h2>" +
"<h4>" + obj.emailaddress1 + "<h4>";
var container = document.createElement("div");
WinJS.Utilities.insertAdjacentHTML(container, "beforeend", htmlString);
return container;
}

Create something like facebook wall

I want to create something like Facebook wall. Currently I am getting the data in a json format and displaying using jQuery $each and then appending it to the main div. I am looking for an alternative way of doing this.
The problem in the current code is that i cannot use the div class to call any method like on.click . The on.click method need to be inside the $each to be get called and it gets called the number of object present in data.
And if i want to update the wall then i need to update the data and has to refresh the whole structure. Is there any other way by which i can add the new post to the wall without rebuilding the structure.
$.each(data, function () {
var status_id = this['Id'];
var like_id = "like" + status_id;
var commennt_id = "commnet-tem" + status_id;
var likes = 0;
$("<div class=\"post-indi\" id=\"post-item" + status_id + "\">" +
"<div class=\"post-content\">" +
" <div class=\"status-profile\" >" +
"<img src="">" +
"</div>" +
"<div class=\"content\">" + this['status'] + "</div>" +
"</div>" +
"<div class=\"commentbox-info\">" +
"<a id=\""+like_id+"\" href=\"#\" class=\"postddlike\">Like</a><img </div></div>").appendTo("div.post");

Categories

Resources