打印网页内容而不从下拉菜单刷新页面 [英] Print content of a web page without refreshing the page from a dropdown menu
本文介绍了打印网页内容而不从下拉菜单刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个简单的HTML页面，使用javascript在HTML页面中显示一些内容，我想从下拉菜单中打印内容一切正常，但是当我打印完成并且ynamic数据从网络中消失时页面会刷新页。
我试过
event.preventDefault（）;和< a href = ＃ önclick = printReading（ event）;返回false; > 等但是从下一次操作中禁用了下拉菜单。
我的示例代码是
< html >
< head >
< span class =code-keyword>< meta charset = utf-8 >
< title > 示例< / title >
< meta name = viewport content = width = device-width，initial-scale = 1.0 >
< / head >
< body >
< div < span class =code-attribute> class = click-nav >
< ul class = no-js >
< li >
< a CLA ss = clicker > < img src = img / i-1.png alt = 图标 > 选项< / a >
< ul >
< li > < a href = ＃ önClick = printReading（event）; > < img src = img / i-2.png alt = 图标 > 打印< / a > < / li >
< li > < span class =code-keyword>< a href = ＃ > < img src = img / i-5.png alt = 图标 > 帮助< < span class =co de-leadattribute> / a > < / li >
< < span class =code-leadattribute> / ul >
< / li >
< / ul >
< ; / div >
< span class =code-keyword>< script src = http://ajax.googleapis.com/ajax/libs/jquer y / 1.9.1 / jquery.min.js > < / script >
< script >
$ （ function （）{
// Clickable下拉
$（' 。click-nav> ul'）。toggleClass（' no-js js'）;
$（' 。click-nav .js ul'）。hide（）;
$（' 。click-nav .js'）。click（ function （e）{
$（' 。click-nav .js ul'）。slideToggle（ 200 ）;
$（' 。clicker'）。toggleClass（' active'）;
e.stopPropagation（）;
}）;
$（ document ）。click（ function （）{
if （$（' 。click-nav .js ul'）。is（' ：visible'））{
$（' 。click-nav .js ul'， this ）.slideUp（）;
$（' 。clicker'）。removeClass（' active'）;
}
}）;
}）;
function printReading（event）
{
var divElements = document .getElementById（ printarea）的innerHTML。
var oldPage = document .body.innerHTML;
document .body.innerHTML =
< html>< head>< title>< / title>< / head>< body> +
divElements + < / body>;
window .print（）;
document .body.innerHTML = oldPage;
// event.preventDefault（）;
}
< span class =code-keyword> function addDummyData（）
{
var table = document .getElementById（' readings_table'）;
var row = table.insertRow（ 0 ）;
var cell1 = row.insertCell（ 0 ）;
cell1.innerHTML = 示例数据;
}
< / script >
< 按钮 onclick = addDummyData（） > 点击我< / button >
< div id = printarea >
< table id = readings_table width = 100％ border = 1 > < / table >
< / div >
< / body >
< / html >
解决方案
（ function （）{
// Clickable Dropdown
（' 。click-nav> ul'）。toggleClass（' no-js js'）;
（' 。click-nav .js ul'）。hide（） ;
I am creating a simple HTML page to display some content in HTML page using javascript and I want to print the content from a drop down menu everything works but the page is refreshing when I print finishes and the ynamic data is disappeared from web page.
I tried
event.preventDefault(); and <a href="#" önclick="printReading(event);return false;"> etc but that disabled the dropdown menu from next operation.
My sample code is
<html>
<head>
<meta charset="utf-8">
<title>Sample </title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="click-nav">
<ul class="no-js">
<li>
<a class="clicker"><img src="img/i-1.png" alt="Icon">Options</a>
<ul>
<li><a href="#" önClick="printReading(event);"><img src="img/i-2.png" alt="Icon">Print</a></li>
<li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
</ul>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
function printReading(event)
{
var divElements = document.getElementById("printarea").innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
//event.preventDefault();
}
function addDummyData()
{
var table = document.getElementById('readings_table');
var row = table.insertRow(0);
var cell1 =row.insertCell(0);
cell1.innerHTML ="Sample data";
}
</script>
<button onclick="addDummyData()">Click me</button>
<div id="printarea">
<table id="readings_table" width="100%" border="1" ></table>
</div>
</body>
</html> 解决方案
(function() { // Clickable Dropdown
('.click-nav > ul').toggleClass('no-js js');
('.click-nav .js ul').hide();
这篇关于打印网页内容而不从下拉菜单刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
