i'm working on a nodejs server which renders posted html to pdf,png or jpg.
( https://github.com/svenhornberg/pagetox (server.js) if you want to try it)
It is working really good, renders complex sites but only to that point that i want do load a simple image. For example i am sending following code to my server:
<!doctype html>
<html>
<head>
<title>logo</title>
</head>
<body>
<img alt="logo" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</body>
</html>
The Code should be okay. But the rendered response image does not contain the logo image.
As said in the phantomjs documentation (http://phantomjs.org/api/webpage/property/settings.html) localToRemoteUrlAccessEnabled is set to false, so set it to true like said in the documentation of phantom-node (https://github.com/sgentle/phantomjs-node/):
page.set('settings.localToRemoteUrlAccessEnabled', true);
page.set('settings.loadImages', true);
to prove it is set to true, i called a getter which returns true
page.get('settings.localToRemoteUrlAccessEnabled', function(data) { console.log(data);});
i'm using node v0.10.26 with phantomjs-node (0.6.1), phantomjs(1.9.7) on linux
Now the question, does anybody see a mistake ? Or can give me a hint what i am doing wrong. Or any other possibilities why phantomjs/phtanom-node isnt loading any external images
I am using the render method to generate the png, jpg or pdf file. I am calling the method inside the evaluate function as a callback, so the site should be loaded completely.
(the full code is at https://github.com/svenhornberg/pagetox/blob/master/server.js)
Edit1: I'm not behind a proxy, which maybe blocks the requests.
looks like i need to set a timeout and wait that all external resources are loaded.
page.set('content') dosen't work with dynamic content in phantomjs
i got it working, but a timeout is not what i want. If i find any better way i will post it.
What you want to set is
page.set('settings.webSecurityEnabled', false);
Which enables cross domain requests. The other option localToRemoteUrlAccessEnabled does not affect your case because you don't use file: resources but you rather overwrite about:blank.
Other issues might be SSL/TLS related. See my answer here for more help.
Related
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I'm using the following script to inject a svg in my html body:
Meteor.startup(function() {
$('body').prepend('<div id="svg"></div>');
$('#svg').load('images/svg/sprite/sprite.svg');
});
This works as intended but things go wrong when I manually reload the page in my browser. But only when there's a parameter in my route. When there's no paramater in my route I can refresh all I want without any problems.
Router.route('/test') // all OK!
Router.route('/test/:_id') // current template gets rendered multiple times and app finally crashes
I can't seem to wrap my head around this. Why is this happening? And how to fix this?
The load path needs to be absolute.
$('#svg').load('/images/svg/sprite/sprite.svg');
Suppose I want the browser to load an image right on the first connection it makes to my website. How do I do that, considering that by default the image loads later on when it's actually called for?
Also, after the whole page finishes loading, suppose I want to load more objects (say images) that aren't required yet but are just for buffer. How do I do that? Help me people, I've been at it for quite a long time.
I'm somewhat successful with the first problem by adding a script tag while actually calling an image at the beginning of my index.php's html head part which goes like:
<script src="http://www.mysite.com/my/image/url.png"></script>
But this I realize is bad scripting.
As for "Why would you want to do that?", it's for educational purposes and also because when someone visits my site, I need to load and display certain things before other things get loaded.
For preloading you probably could start with
<body onLoad="Preload('image1.jpg', 'image.gif', 'image.png', ...)">
And preload is a JavaScript function which adds each of the array of images to DOM like
document.imageArray[i].src = args[i];
Putting this code in
$('#hello').click ->
alert 'hello'
in posts.js.coffee in vanilla Rails 3.1 app does not work. The javascript is compiled and loaded before the page so the function isn't bound to its element. There are easy solutions, like manually loading the js on the page rather than using the asset pipeline, or using JQuery .live functions, but it seems like this code should work out of the box. Am I missing something??
I might be pointing out the obvious here, but have you (in jQuery) tried this:
$(function(){
//your code
$('#hello').click(function(){
alert("hello");
});
});
or
$(document).ready(function(){ [...] });
These (atleast under normal circumstances) should prevent any javascript inside from doing anything until the DOM has been loaded.
Hope this helps
I have searched for two days on google trying to solve this problem. I have also searched this forum and read the FB Dev page till my eyes hurt. I asked this question two days ago and it got removed. I completely understand but if I am asking it incorrectly please, please, help me to ask correctly or point me in the right direction or tell me im an idiot, anything.
I am trying to use FB.UI to "Publish a story to the feed" from my site. That is working fine.
My problem is that I want to add a video instead of a photo. So based on the FB DEV docs, I am trying to use the "source" property to do this. But I have tried multiple video formats to no avail (avi, mp4, flv). The only thing that does seem to work is a SWF file but I do not have the video in that format. (tried to do that also but don't have the right tools)
Does anyone know if you have to use SWF or can you use another format and I am doing it wrong.
You can see my progress here http://www.thishope.org/facebook-tab.html (click on "get a free song" to get the dialog box.)
This is the code from my page
<html>
<head>
<title>This Hope</title>
<link href="http://www.thishope.org/this-hope-fb-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '244237565620746',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<div id="fb-link">
<script type="text/javascript">
function newInvite(){
FB.ui({ method: 'feed',
message: 'Get A Free Song!',
source:'http://www.thishope.org/FB-Only-One-Lord.mp4',
name:'Get A Free Song By This Hope!',
caption:'Only One Lord',
description:'Click share to post on your wall and download the song',
});
}
</script>
Get A Free Song!
</div>
</body>
</html>
Could you not host a flash video player like flowplayer?
I know it supports FLV, not sure about other formats, you may need to convert to FLV server side first
You can then attach the SWF URL to your post, which will have the advantage of the video being playable right inside Facebook's news feed
Check this sample page's source: http://sdoyle.fbdublin.com/tests/tasks/632942.html
The meta tags on this page, when detected by Facebook (via a share or Like), render the flowplayer video player right into the news feed post, and flowplayer knows which video to play via the configuration passed to it as a parameter.
I know it's not exactly what you're trying to do, but should give you the right idea for your video.
You should be able to embed in the same manner by using the source parameter for the Feed Dialog to specify a flash player for your content