I really hope someone can get me started on this one.
I generated the HTML5 integration code for the Facebook like and share buttons using the facebook developer form. After integrating the code on a client's website, the buttons are only shown using Chrome, but they are not rendering in Firefox or IE.
Looking at the generated code it seems that the Facebook API does not create the code needed to show the buttons when using the latter.
I searched quite a lot and experimented with all kind of initializations (synchronous vs asynchronous loading, different integration methods like iFrames, xml declarations, app publishing, etc...) - with no change in behaviour at all.
I also thought I might have trouble with other scripts running on the page, but when creating a new website only holding the like button codes the problem remains.
By now I am running out of ideas and I cannot find anyone having the same problem. Seems to be some stupid error I cannot see myself. Would someone help me out having a look at:
http://www.berliner-bueroverzeichnis.de
http://www.berliner-bueroverzeichnis.de/debug.html
CODE:
Insert title here
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '470372866398003', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/de_DE/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-like" data-href="https://www.facebook.com/berlinbueros.de" data-width="250" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
</html>`
Related
so I have this problem, Im trying to build a website in which people can give out links which I will then analyze using request-promise.js (so on the server side) . This analysis will try to find embed videos in the given link. If present I want to make that emebed video appear in an iframe on my current page.
So for now Ive managed to get the embed the video, and render it in an EJS template variable , but this means that I have to use res.render('page', variables) and from my understanding that means reloading the page.
What I want to know is if there is a way to do that without reloading the page ?
(my goal is to make the found video appear in a bootstrap modal div that appears after people gave the link and clicked on my upload button that trigers the scrapping of the given link)
Thanks for your help
Pardon me if my question is unclear
You can use an XMLHttpRequest to get the data from the server asynchronously and display/store them on the page without reloading the whole page.
var url = '/get-embed-video/'+link;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4) {
// here get the response from the server
// and display your data
}
}
xmlHttp.open("GET", url, true); // false for synchronous request
xmlHttp.send(null);
The default home page for our company workstations is http://intranet, which is our internal SharePoint site set by group policy. Right now, if a user attempts to open IE on a laptop when they are off-site, they are (obviously) greeted by a "Page cannot be displayed" error. This causes confusion from our less sophisticated users and they wind up calling our help desk even though there is nothing wrong with their internet connection.
What I would like to do is set the default home page to a local .html file that will use an HTTP redirect to forward the browser to our public web site if the internal URL is not reachable.
Is this possible?
All too often, something that seems easy to implement can turn out to be quite challenging. In this case, JavaScript prohibits cross-domain calls for security measures, so a XMLHttpRequest isn't an option.
It seems like your best option would be to implement the solution discussed here: Test url availability with javascript.
I did some quick testing in Chrome & IE and this code worked well in both. (IE did complain about running the script on a local page, but this would be the same regardless of solution.)
<html>
<head></head>
<body>
<script>
function checkServerStatus(url)
{
var script = document.body.appendChild(document.createElement("script"));
script.onload = function()
{
alert( url + " is online.");
};
script.onerror = function()
{
alert( url + " is offline.");
window.location.replace("http://google.com");
};
script.src = url;
}
checkServerStatus("http://google.com");
checkServerStatus("http://intranet");
</script>
</body>
Here's another link that discussing this solution: https://petermolnar.eu/test-site-javascript/.
Hope this helps.
I have a page one my website that I'd like to emulate into a 'newtab' chrome extension.
I want to make something similar to this:
https://chrome.google.com/webstore/detail/animatedtabs-a-new-gif-on/kenhfdoiondldpcoajdbackbnmehgahl?hl=en
I have a lot of information on my server that i'd like to be able to serve as a chrome newtab extension - and this extension above loads a different GIF everytime a new tab is opened - how do they get data from their server? I don't seem to be able to find a way to do this.
I found the answer, for anyone wondering. The answer came in the form of this page:
https://developer.chrome.com/extensions/xhr
Which basically states that if you put a URL into the 'permissions' field in the manifest.json file, you can then access that URL in your application using the JS found on that page, eg:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// innerText does not let the attacker inject HTML elements.
document.getElementById("resp").innerText = xhr.responseText;
}
}
xhr.send();
I've now got my chrome extension working perfectly!
I started to program my own Chrome extension today and I'm stuck since hours with one problem.
Right now, I'm sending the current URL from the open website to my server where it's checked against some criterias and then a return value is sent back to the extension. This is working so far. I'm using only a popup.html, no background page.
The request is only sent when the user clicks on the icon in the browser.
How can I realize that the request is automatically sent, when the page is loaded?
If there is a specific return value from the server the user should be given an unannoying warning. Alert boxes and new windows are...well...annoying. Best way should be the little popup under the icon of the extension but that's not possible without a user's click. So I thought of a little -layer at the top of the page.
<html>
<head>
<script>
window.addEventListener("load", sendRequest, false);
function sendRequest() {
var q = "test";
xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET', 'http://www.testurl.com/check.php?q='+q, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("textf").innerText = xmlHttp.responseText;
chrome.tabs.executeScript(null,{code:"<div style='position: absolute; top: 0; left: 0; background-color=blue;layer-background-color: blue;'><p>test </p><p>test2 </p></div>"});
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
//Just for the popup...
<font color="blue"><p id="textf">Checking...</p></font>
</body>
</html>
If I do
chrome.tabs.executeScript(null,{code:"alert('testalert')"});
it gives me the alert. However, the isn't working and I can't figure out why :(
Do I need a background page for all this since I only want to check the URL when the page is loaded?
Why is the -thing not working but the alert is?
Thank you in advance!
chrome.tabs.executeScript is for JavaScript only. To add content to a Web page, you must write JavaScript that manipulates the DOM. A good place for you to start learning this may be Mozilla's DOM docs. (DOM is a W3C standard and Chrome has implemented it, so yes, Mozilla pages are relevant here.)
If I may say so, it sounds like the best way forward for you is to scrap this and start over with a content script defined in your manifest so that Chrome will execute it for you; check the Content Scripts documentation to learn more. Since you're trying to accomplish your goal with no background page, and would therefore need to use XMLHttpRequest directly from your content script, you should add "minimum_chrome_version": "13" to your manifest, as Chrome 12 and earlier won't let you do that.
By the way, practically no one will understand what you're talking about when you use "-layer" and "-thing" like that. Please be more careful in making sure you are using proper terminology. Ask your peers if you're unsure of the proper term for something.
I've been working on a custom CMS in drupal for about two or three weeks now, and I keep running into this same problem. I'm trying to load a dynamically generated url (by extracting the node id of the target drupal page into $resultCut and appending it to the baseurl of the website). This iframe is embedded next to an instance of CKEditor, and the idea is to have the content in the iframe change when the fields in CKEditor are modified. I have the following Jquery:
<script type="text/javascript">
$(document).ready(function(){
baseurl = urlhere;
url = baseurl+"<?php echo $resultCut ?>"
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
alert ( "LOADING COMPLETE" + HTML );
});
$('#edit-field-mobile-page-header-label-0-value').change(function () { // writes changes to the header text to emulaor
var curr = $(this).val();
$('#EmuFrame').contents().find("h1").text(curr);
});
$('#edit-body').keyup(function(e) { // writes changes to the body text to emulator
var curr = $(this).val();
currhead = $('#EmuFrame').contents().find("h1").html();
$('#EmuFrame').contents().find('#content').html("<h1>"+currhead+"</h1>"+curr);
});
where #EmuFrame is the id of an iframe, and the #edit-* tags are the ids of fields in CKEditor that I am monitoring for change. When the user types, the keyup() or change() events is supposed to grab the new html and swap it with the html in the iframe.
As of right now, the LOADING COMPLETE alert fires, but there is no html in the alert. I noticed that the content of the iframe loads AFTER the alert fires, however, which is what led me to believe that it's a problem with the order in which the events trigger.
Further, I had an alert in the callback function of keyup that returned the new html [ alert(curr) ] that was generated when a user started typing, and this alert returns html (although, it is being grabbed from CKEditor). However, the iframe does not reflect any changes. If I append [ alert (currhead) ] though, nothing is alerted at all.
It might be of interest to note that the source url is technically on a different domain than the parent. however, I used a workaround (i'm pretty sure it works, because I've previously gotten the whole html replacement thing working, and then somehow it broke). Also, neither Firebug nor Chrome's console report any XMLHttpRequest errors. Also, I keep getting this error: "Uncaught Syntax error, unrecognized expression: [#disabled]" and I'm not sure what it means, and whether its relevant to my problem as stated above.
That was a ridiculously long plea for help, so THANKS FOR READING, and thank you for any help!!
Your note about about the cross-domain iframe src is worrisome -- you shouldn't be able to access its contents with javascript. Nevertheless:
You have these two lines in quick succession:
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
Try waiting for the iframe to load first:
$('#EmuFrame').load(function() {
var HTML = $('#EmuFrame').contents().find('body').html();
}