1、新建html文档，在body标签中添加一个按钮，然后在head标签中引入jQuery文件：
2、使用jQuery给按钮添加点击事件，然后使用ajax发送请求并将获取到的结果进行输出：
3、用浏览器打开代码，点击浏览器上的按钮，这时html页面中的内容就被输出到了控制台中：
用ajax。
引入jquery的话，
$("button")click(function(){
$("div")load('testhtml');
});
如果你要获取这个页面某个id或者类的html还可以这么写
$("button")click(function(){
$("div")load('testhtml
#container');
});
这个可以直接把新页面的html元素加载到指定的div或者别的元素里面。
如果你要纯代码的话，那再获取这个div的html就可以了。
$("div")html();
很酷吧，相信经常在网上复制粘贴的人应该不陌生，我也是经历过，觉得很神奇，所以就寻思着是不是也在自己的博客里面也实现这个功能，经过一番查资料于研究，我总算弄明白了其中的原委，并实际应用于我的博客，你可以复制我粘贴试试，觉得酷的话就可以往下接着看了！下面来看一下实现过程。这里说明一下，浏览器版本较低的话可能`addEventListener()`不支持，特别是IE浏览器，IE8以前包括IE8的版本都不支持此方法。
当用户选中某段内容时windowgetSelection()获取一个Selection对象，将这个`objSelectiontostring()`，就是选中区的内容，这里可以用` var selectionString = windowgetSelection()toString()`在控制台查看，能在控制台查看说明我们就可以通过js获取到，selectionString + '自定义内容'，到这里复制的原内容我们就有了。这里我们要创建一个DOM容器来存`objSelectiontostring()`，最好是可以换行的，如p、div、textarea等。
当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来 *** 纵可编辑内容区域的元素，这里主要用其中的copy命令来实现复制功能，听说插件Clipboardjs也是调用这个方法实现复制功能的`bool = documentexecCommand(aCommandName, aShowDefaultUI, aValueArgument)`，第一个参数是命令的名称，字符串类型，后两个参数我们可以不用，返回bool值，如果是 false则表示 *** 作不被支持或未被启用命令只介绍用到的copy命令:
> copy：拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
这是很重要的一步，这是复制内容的关键命令。这里我们只需要在正确的时间执行`documentexecCommand('copy')`即可。
addEventListener()方法用于向指定元素添加事件句柄，这里我就抛开文档，就针对本次功能对这个HTML DOM方法进行通俗的解释了，这里主要用来规定我们自定义复制功能的有效DOM范围，来个例子：
//body中有<div id="test">content</div>
var el = documentgetElementById('test');
eladdEventListener('copy', function (e){
// 触发copy事件后的处理
}
这个例子中我们实现的功能将只在id为test的DOM元素里有效，其它地方将恢复默认复制功能。
Range表示包含节点和部分文本节点的文档片段。用`var range = documentcreateRange()`方法创建，这里面为什么要创建Range呢，主要是用来存储Selection对象的开始位置和终点位置，因为我们是要阻止默认的copy事件，让copy的内容是用户选中的内容加上我们自定义的内容，再将这个内容放入粘贴板，形成最终的粘贴内容。`documentcreateRange`得到是还没有放内容的片段，我们我们还会用到`RangesetStart()`设置Range的起点和`RangesetEnd()`设置Range的终点。最终`selectionObjremoveAllRanges()`将selectionObj中的默认Range 去掉，`selectionObjaddRange(range)`,粘贴板就有了，不出意外去粘贴就会有选中的内容加自定义的内容了。
源码可以联系作者。这里有个特别注意的点，如果是原生js的话直接调用函数就可以，如果是vuejs的话中可以看到，我是在mounted()钩子函数里调用，而不是在created()钩子函数里调用，这里一定不能在created()钩子函数里调用，为什么呢？
因为created()执行的时候一般是在html渲染前的 *** 作，此时el还是undefined，所以执行getElementById()就会报错，created()适合做html渲染前的数据初始化工作。而mounted()一般是在html渲染完成后的 *** 作，此时el，data都已经加载完成，一般对dom的 *** 作都写在mounted中，这是个要注意的点，喜欢的话就给作者点个心，谢谢
最近遇到这个问题，楼上没有给出答案，为了以后百度方便，回答一下。看了JQuery，里边想要获取html内容需要提供标签或id或class，并不能解决该问题。
if (windowgetSelection) { //现代浏览器
userSelection = windowgetSelection();
var range = userSelectiongetRangeAt(0);
var rangeText = rangetoString();//选中文本
var div = documentcreateElement('div');
divappendChild(rangecloneContents);
alert(divinnerHTML);
var rangeHtmlText = divinnerHTML;//选中内容，包含标签
//如果想获取里边的标签，可以通过
//var aArr = divgetElementsByTagName('a');
//for(var i=0; i<aArrlength; i++){ var aObj = aArr[i];}
} else if (documentselection) { //IE浏览器 考虑到Opera，应该放在后面
userSelection = documentselectioncreateRange();
var text = userSelectiontext;//获得文本
var htmlText = userSelectionhtmlText;//获得包含标签的内容
}
上面两种方法应该够用了
然后用
可以通过jquery的一个复制插件zclip来实现，因为它的兼容性非常好。
引入JS文件
<script src="jqueryminjs"></script><script src="jqueryzclipminjs"></script>
html代码：
<div style="margin:200px auto;width:300px;"><input type="text" value="输入框中的内容" id="link">
<a id="copyBtn" href="javascript:;">复制链接</a>
<div id="div_body">
<span style="color:red;">这里是div中的html内容</span>
</div>
<a id="copyDiv" href="javascript:;">复制链接</a>
</div>
JS代码：
<script>$('#copyBtn')zclip({
path: "ZeroClipboardswf",
copy: function(){
return $('#link')val();
}
});
$('#copyDiv')zclip({
path: "ZeroClipboardswf",
copy: function(){
return $('#div_body')html();
},
afterCopy: function () {
alert("已成功复制！");
}
});
</script>
关于zclip详细使用可以百度！
获得JS生成后的HTML代码，我们首先需要你要获取的是那一段代码，然后我们在通过innerHTML这个JS的方法来调用，然后我在输出这段方法就行了，这里我还是写一段代码：
<html>
<head></head>
<script>
var oDiv = documentgetElementById('div1');
alert(oDivinnerHTML);
</script>
<body>
<div id='div1'>
<p>我会被获取的</p>
</div>
</body>
</html>
这样我们就能获取到JS生成后的html代码。
简单实现代码如下
<script language="javascript" type="text/javascript">
function load()
{
var test=documentgetElementsByTagName('html')[0]innerHTML;
alert(test);
}
</script>
以上就是关于js获取html页面显示内容全部的内容，包括:js获取html页面显示内容、怎么用JS获取某一个指定页面（非本页面）的HTML代码、js实现网页内自定义粘贴板等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）