I'am visiting certain websites with phantomjs. Is it possible to run functions from sites environment in page.evaluate method? Can you provide and example of correct usage.
Yes, of course it is possible. You just call the site function inside of page.evaluate. Consider the example:
example.com html
<html>
<head>
</head>
<body style="background-color: white">
<p>A page</p>
<script>
function makeRed() {
document.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
PhantomJS script
var page = require('webpage').create();
page.viewportSize = { width: 600, height: 300 };
page.open('http://example.com', function() {
page.evaluate(function(){
makeRed();
});
setTimeout(function(){
page.render('red.png');
phantom.exit();
}, 1000);
});
Result:
Related
I have added the Web component Polyfill.
npm install #webcomponents/webcomponentsjs
I have added them in my index.html file:
<script src="./webcomponents/custom-elements-es5-adapter.js"></script>
<script src="./webcomponents/webcomponents-bundle.js"></script>
<script src="./webcomponents/webcomponents-loader.js"></script>
<script src="./webcomponents/webcomponents-bundle.js.map"></script>
Also Script for no suppport.
<script>
if (!window.customElements){document.write('Web components not supported'); alert('hi');
console.log('No web component');
}
I get the data Web components not supported in IE 11.
I tried the same using Vanilla JS and HTMl
My Html code
<html>
<style>
<head>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-
loader.js">
<script>
if (!window.customElements){document.write('Web components not supported');
alert('hi');
console.log('No web component');
}else{
alert('Web componnets is supported');
}
</script>
</head>
<body>
**<my-shadow></my-shadow>**
<script src="C:\Users\rgo7cob\Desktop\shadow.js"></script>
<h3> Hello. It is in Red </h3>
</body>
</html>
I have loaded the script from https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js.
I get the error in IE 11 console at Line number 2 in Js file
const template =document.createElement('template');
**template.innerHTML=`**
<style>
h3{
color : blue;
}
</style>
<h3> This is data from the Template and it is blue</h3>
Browser is not able to identify the template object even after using webcomponents-loader.js.
My Web component element must look like this.
When you reference webcomponents-loader.js in the page, IE will actually be compatible with the template element. Your problem is that you need to add the template element to the body after you create it, and if you need to add html elements to the body, you need to wait for it to load, so you need to execute these codes in window.onload().
A simple example:
window.onload = function() {
const template = document.createElement('template');
template.innerHTML = "<h3>This is a template.</h3>";
document.body.appendChild(template);
}
function show() {
var shadowEle = document.getElementById('shadow1');
var shadow = shadowEle.attachShadow({
mode: 'open'
});
//add style
const styles = document.createElement("style");
styles.textContent = 'h3{ color:blue; }';
shadow.appendChild(styles);
//add h3 title
const title = document.createElement("h3");
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
title.textContent = clon.childNodes[0].textContent;
shadow.appendChild(title);
}
if (!window.customElements) {
document.write('Web components not supported');
alert('hi');
console.log('No web component');
} else {
alert('Web componnets is supported');
}
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js"></script>
<input type="button" name="show" id="show" value="show template" onclick="show()" />
<br />
<my-shadow id="shadow1">
</my-shadow>
Result in IE:
processing image is not called on pagination jquery datatable server side
<script src="Assets/DataTables-1.9.0/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#example').dataTableDataTable({
"language": {
"processing": "Processing...",
"LoadingRecords": "Processing..."
},
});
</script>
</body>
</html>
Maybe in chrome，you can changing the z-index in css:
.dataTables_processing {
z-index: 1000;
}
In node-webkit, call from iframe javascript to parent javascript doesnt work for me.
I am trying to launch a link in the iframe on the default browser as a result
I want to call a function in the parent window so as to call:
gui.Shell.openExternal("link");
Any help is appreciated. Thanks in advance.
What you want to do, is to intercept links in the internal frame.
Here we have an iframe where all links will open in the default browser, not in the Node WebKit context. I hope this helps.
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.gui = require('nw.gui');
handleLinks = function(event)
{
var href;
function checkLinks(element)
{
if (element.nodeName.toLowerCase() === 'a')
{
href = element.getAttribute('href');
if (href)
{
gui.Shell.openExternal(href);
// important, prevent the default event from happening!
event.preventDefault();
}
}
else if (element.parentElement)
{
checkLinks(element.parentElement);
}
}
checkLinks(event.target);
};
function isLoaded()
{
// let's see if the iframe has finished loading
var iframe = document.getElementById('myframe');
if (iframe && iframe.contentWindow && iframe.contentWindow.document &&
iframe.contentWindow.document.body &&
iframe.contentWindow.document.body.innerHTML)
{
//now deal with links
iframe.contentWindow.document.body.addEventListener('click', handleLinks, false);
}
else
{
// not yet, let's wait a bit and try again
setTimeout(isLoaded, 300);
}
};
</script>
</head>
<body>
<iframe id="myframe" src="http://www.google.com" onLoad="isLoaded();" style="width: 100%;" seamless="true" nwdisable nwfaketop></iframe>
<div>
Links in the normal browser should still work in the Node Webkit environment.
</div>
<footer>
Whaddayaknow
</footer>
</body>
</html>
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});
I donwloaded this release, and I'm trying to run an example from the docs.
After expanding the Dojo download, my dojo dir is:
js/dojo-release-1.5.0/dijit
js/dojo-release-1.5.0/dojo
js/dojo-release-1.5.0/dojox
The buttons show up, but hide button does not hide the div.
Do I need to add other Dojo libraries along with the reference to dojo.js?
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
});
HTML:
<button dojoType="dijit.form.Button" id="buttonOne">
Hide Me!
</button>
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
<div id="findMe">
Hiya!
</div>
There are a couple of things you may be missing. As Daniel says, adding parseOnLoad=true as a djConfig param will help. Alternatively you can add djConfig params as a global JS variable before your dojo.js script tag, i.e.
<script>
var djConfig = {
parseOnLoad: true
}
</script>
A final alternative is to manually call the parser yourself. To do this, modify your JS to:
dojo.require("dijit.form.Button");
// You need to manually require the parser if you're going to call it yourself
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
// New line, parse the doc
dojo.parser.parse();
});
Additionally to parsing, you may need to add a theme (you've not mentioned if you've done this or not). The easiest way to do this is to add the class name to your body tag and import the css.
...
<link rel="stylesheet" type="text/css" href="/js/dojo-release-1.5.0/dijit/themes/claro/claro.css">
</head>
<body class="claro">
...
</body>
http://telliott.net/dojoExamples/dojo-buttonHelloWorld.html contains an example of this all working for you, feel free to go crib.
Reading http://dojotoolkit.org/reference-guide/djConfig.html#djconfig and http://dojotoolkit.org/reference-guide/dijit/info.html#dijit-info would probably be a good idea also.
HTH.
Tom
try adding djConfig="parseOnLoad:true" when add the dojo.js to the page.
ex:
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
//Daniel