打开PDF href时附加元素

Question

我在测试一些东西，但不完全确定它是否可能。我有一个外部pdf的基本href。我想给它附加一个动态元素，比如现在的div和h1标记。

<a href="https://osm.hpi.de/teaching/profSem/statistics101.pdf" onclick="createElements()">View</a>
<script>
function createElements(){
var div = $(document.createElement('div'));
div.innerHTML = '<h1 id="myTitle" class="back-button" alt="custom-title">';
$('#myTitle').css({
'position': 'absolute',
'z-index': '99',
'top': '16px',
'left': '12px',
'width': '11%',
});
}
</script>

基本上，当打开外部href时，我想在该文档上添加一个h1标记。不过，目前还不确定这是否可行。上面的代码似乎不起作用，但如果能用普通的javascript/jquery来完成这项工作，我们将不胜感激。

Answer 1

您不能影响尚未打开的文档。要做到这一点，您的javascript代码需要在PDF中，但由于浏览器对PDF内容的处理方式不同(应该如此(，因此永远不会执行。简而言之，我认为这是不可能的。

Answer 2

您的href将始终将用户发送到浏览器的PDF查看器，您将失去对此的控制。

如果你想在PDF文件上方或上方看到一个元素，你可以使用"；模板页"；其中有HTML元素和带有指向PDF文件的src的全屏iFrame。

这将在iFrame中呈现浏览器的PDF查看器，并显示您的模板页面。

Ex。

<div>
<div>
<!-- Your element here (you can make this absolute to make it lay over the pdf file etc.. -->
</div>
<iframe src=".../.pdf" style="width:100vw;height:100vh">
</div>

Answer 3

也许您根本不需要jQuery。我会这样做(注意，我事先将div留空(：

<a href="https://osm.hpi.de/teaching/profSem/statistics101.pdf" onclick="createElements()">View</a>
<div id="myDiv"></div>
function createElements(){
var text = document.createElement("h1");
text.innerHTML ="MY heading";
document.getElementById("myDiv").appendChild(text);
}