I have tried this code
// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;
// Get all stylesheets HTML
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
console.log(stylesHtml);
// Open the print window
const WinPrint = window.open();
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
but it only add portions of vuetify css like v-btn. My problem is I am printing with a lot of helpers like d-flex text-right on a div but not working with this code.
Related
Basically, I want achieve this index.html structure:
<html>
<head>
<!-- titles, metas and other "static" stuff -->
<link rel="preload/prefetch" ...> <!-- injected by webpack (ok) -->
<!-- By default compiled styles are injected here, in head, I want them in body -->
</head>
<body>
<div>
My static loading animation
All possible styling is inlined
It doesn't depend on anything!
It also could be anything, even just a plain "Loading..." text.
You still WON'T see it until all style's in head are loaded.
</div>
<div id="app">Vue application goes here</div>
<link rel="stylesheet" href="..."> <!-- Styles injected by webpack (WANTED!) -->
<script src="..."></script> <!-- Scripts injected by webpack (by default, OK) -->
</body>
The reason I want this, is that my html is completely capable of displaying initial loading animation to the user and I want it to render instantly as soon as index.html is loaded and not depend on any other resources. Really, I think this is everybody want, just to say...
But Vue by debault is configured to include it's compiled styles to the <head> tag, which blocks rendering of the page until these styles are loaded. I cannot find any docs of how I could change it.
Update: Pictures!
So, I've managed to manually simulate two variants:
styles are injected in <head> (default)
styles are injected in <body> (wanted)
Here are the pictures of the visual difference:
1) styles are injected in <head> (default):
2) styles are injected in <body> (wanted):
The label "html rendering starts" on pictures means that a user actually sees loading animation, defined completely inside html (small piece of svg and styling in my case, could be anything in general case) and doesn't depend on any other external resources for it to render.
Solution
vue.config.js
class InjectStylesInBody {
apply(compiler) {
compiler.hooks.compilation.tap('inject-styles-in-body', (compilation) => {
if (!compilation.hooks.htmlWebpackPluginAlterAssetTags) return;
compilation.hooks.htmlWebpackPluginAlterAssetTags.tap('inject-styles-in-body', function(pluginArgs) {
const { head, body } = pluginArgs;
head
.filter(asset => asset.tagName === 'link' && asset.attributes && asset.attributes.rel === 'stylesheet')
.forEach(asset => {
head.splice(head.indexOf(asset), 1);
body.push(asset);
});
});
});
}
}
module.exports = {
// ...
chainWebpack: config => {
// ...
config
.plugin('inject-styles-in-body')
.use(InjectStylesInBody)
;
// ...
}
// ...
};
Notes
Eventually, this has nothing to do with Vue.js. One could easily use this with other frameworks or with naked webpack.
It could be much easier if HtmlWebpackPlugin had some inject-css option for styles as it has for scripts.
See: https://github.com/jantimon/html-webpack-plugin/blob/e2c6990e94b298ff66bcd885c9a03a78221479f6/index.js#L548
My node version is: 10.6.0
My npm version is: 6.1.8
I am rendering a website under a WebView inside a react native app.
I need to open a URL outside the react native app when I touch a link.
My html file is like below
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#fb").click(function() {
window.postMessage("fbclicked");
});
});
</script>
</head>
<body>
<a id="fb" href="fb">Click Here</a>
</body>
</html>
What should i do in my react native App.js to open the link outside of the app.
Need help.
Thanks.
You need to use linking.
Linking.openURL(url).catch(err => console.error('An error occurred', err));
If URL is like http://, it's open the browser. Also if it's mailto: , open your email client . Etc...
I have a page that loads an iframe, but I get NoSuchElementError error messages.
My code:
driver.wait(until.ableToSwitchToFrame(0)).then((d) => {
//*** SLEEP HERE
const button = By.css(".button");
driver.wait(until.elementLocated(dropdownElem)).then((btn) => {
btn.click();
});
});
First I switch to the correct iframe, then I try to wait for the element to load inside the iframe.
If I insert a driver.sleep(1000); to the line //*** SLEEP HERE it works, otherwise it fails with:
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".button"
}
Why doesn't the driver.wait line waits for the element to become available?
I tested this on my local and it seems to have worked fine for a button within Iframe. Here is the code
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
driver.get('file:///Users/../sampleFiles/sample-iframe.html');
driver.wait(webdriver.until.ableToSwitchToFrame(0)).then((d) => {
//*** SLEEP HERE
const button = webdriver.By.css(".Button");
driver.wait(webdriver.until.elementLocated(button)).then((btn) => {
btn.click();
btn.getTagName().then((tag) => {
console.log(tag);
});
});
});
I get button on console
and Iframe HTML this is tested on is
<html lang="en"><head>
<meta charset="UTF-8">
<title>Example of HTML Iframe</title>
</head>
<body>
<iframe src="file:///Users/../sampleFiles/sample.html" width="300" height="200">
<html><head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="ButtonID" class="Button">Click Me!</button>
</body></html>
</iframe>
</body></html>
Check your driver.wait(until.elementLocated(dropdownElem)) line , seems theres a typo , change it to
driver.wait(until.elementLocated(button )) and try again
I am working on a php application where I used 'arcgis' API for loading a map. please find the URL below:
http://js.arcgis.com/3.11/
In order to load an arcgis map in my application, I must use
dojo.require("esri.map");
So In my single page PHP application I added this require statement as below:
<script type="text/javascript">
dojo.require("esri.map");
</script>
And in a js file I gave the map is loaded as shown below:
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
But when I run this application, I am getting an error stated "Uncaught TypeError: undefined is not a function" at the line "this.map = new esri.Map("mapDiv", myOptions);"
If I open developer tools run the same code by keeping breakpoints at require and esri.Map statements, I could see the map is getting loaded. But If I run it without opening developer tools then I am facing this issue.
Why dojo.require statement is not working as expected?
Whats wrong am I doing??
Kindly reply
You are trying to load map module with legacy module require. Try require Map using AMD syntax as shown in docs:
require(["esri/map"], function(Map) { /* code goes here */ });
You need to wrap your JavaScript code in a call to dojo.ready.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>JavaScript in Separate File</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#mapDiv{padding:0;}
</style>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="//js.arcgis.com/3.11/"></script>
<script src="code.js"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.agstiled");
</script>
</head>
<body class="claro" >
<div id="mapDiv"></div>
</body>
</html>
code.js file:
dojo.ready(function() {
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
var layer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
this.map.addLayer(layer);
});
I'm trying to create a googlemap which contains a marker with an individual image instead of the standard google pin. The image is a 14 by 14 pixel GIF. By clicking on the image, a small information window shall appear.
Both the GIF and the HTML file are stored in a local directory.
My code works fine, except one thing: The "hot spot" area, that is clickable with the mouse, isn't lying on the GIF itself. Instead, it is a square that is located just left above the GIF - the lower right corner of the hot spot area is at the upper left corner of the GIF. So if I want the infowindow to appear, I have to click left above the GIF, not on the GIF.
I haven't seen this effect on my V2-map. I already was fooling around with the parameters size, origin and anchor of the image object, but to no avail. The anchor parameter just shifts the location of the image, but it also shifts the clickable area. The size parameter has only an effect if it is smaller than the GIF itself; then it cuts the edges of the GIF. Also the origin parameter lets the GIF just look funny.
Any ideas that might help? Here's the code I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>GMaps V3</title>
<style type="text/css" media="screen">
* { FONT-FAMILY: Arial,sans-serif; FONT-SIZE: 12px; margin: 0.2em; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=" type="text/javascript" ></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var center_of_map = new google.maps.LatLng(50.0, 11.0);
var marker_pos = new google.maps.LatLng(50.03, 10.98);
var mapOptions = { zoom: 10, center: center_of_map };
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var image = {
url: 'bridge.gif',
size: new google.maps.Size(14, 14),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
}
var markerProperties = {
map: map,
title: "Click me!",
icon: image,
position: marker_pos
};
var marker = new google.maps.Marker(markerProperties);
var myInfo = new google.maps.InfoWindow(
{ content: "This is an information window" }
);
google.maps.event.addListener(
marker, 'click', function() {
myInfo.open(map, marker);
}
);
} //load
//]]>
</script>
</head>
<body onload="load()">
<table border="1">
<tr><td><b>This is our map</b></td></tr>
<tr><td><div id="map" style="width: 400px; height: 300px"></div></td><tr>
</table>
</body>
</html>
Okay, it seems that it has something to do with the included style. If I comment out the lines, the effect is no longer visible and everything is as it should be. Funny!
I had the same problem. The fix in my case was to add a class to the body as such:
body.no-zoom {
zoom: 1;
}
However, in my case the map was a direct child div node of the body.
<body class="no-zoom">
<div id="map-canvas">
</div>
</body>