Skip to main content
Participant
September 11, 2020
Question

PDF Embed API and DOM manipulation

  • September 11, 2020
  • 1 reply
  • 2532 views

Hello, I have a perhaps unusual use case where I'm loading a document into a page view adjacent to some of my own content that's discussing the document.  Further down the page I have more discussion content about the same PDF and would like to be able to reposition that embed viewer to be closer to the later content when the user clicks a button down there.

I'm able to use a plain old javascript insertBefore() to manipulate the DOM and accomplish this, but an unexpected side effect is that the browser immediately scrolls back to the top of the page when I do it.  That wouldn't normally happen, so could something in the embed API's event listener be responding to the DOM being changed? If so, is there any way I could suppress that response?

Thanks for any help!

James

 

This topic has been closed for replies.

1 reply

Joel Geraci
Community Expert
Community Expert
September 11, 2020

You can use the event callbacks in the Embed API to scroll your content to the right location and also use scroll events in your HTML to cause Embed API to scroll to a page in the PDF. Creating bi-directional communication is really pretty easy.

Participant
September 11, 2020

Hi Joel, thanks for your response.

I'm already using the gotoLocation function to scroll the PDF within the viewer to the location I want.  Works great, and a code sample is below (pretty much the same as in the documentation).

What I'm doing is using javascript insertBefore() calls to move that adobe-dc-view1 div to a different location on the page (that the user has manually scrolled down to).  That works fine but something is triggering a scroll-to-top event for the whole browser window that I don't want; I want the page scrolling to remain where the user put it.

Some additional info: when I originally tried moving the adobe-dc-view1 div itself, the viewer would go completely blank and the browser dev tools console would show errors as given below the code sample.  So I took a different approach and moved the other page content instead; that made the embed viewer continue to work but with the unwanted scroll-to-top on the containing page.

Maybe a weird approach but it's very close to working the way I want -- just this one glitch!

Thanks,

James

		<div id="adobe-dc-view1" style="height:300px;width:100%;margin-bottom:15px;"></div>
		<script type="text/javascript">
			document.addEventListener("adobe_dc_view_sdk.ready", function()
			{
				var adobeDCView = new AdobeDC.View({
					clientId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
					divId: "adobe-dc-view1"});
				previewFilePromises[1] = adobeDCView.previewFile({
					content: {location: {url: "/PDFview/CO_CBS1.pdf"}},
					metaData: {fileName: "CO_CBS1.pdf"}
				},{
					embedMode: "FULL_WINDOW", showPageControls: false,
					defaultViewMode: "FIT_WIDTH", showLeftHandPanel: false,
					showAnnotationTools: false, showDownloadPDF: false,
					showPrintPDF: false, enableFormFilling: false
				});
				
					previewFilePromises[1].then(adobeViewer => {
						adobeViewer.getAPIs().then(apis => {
							apis.gotoLocation(1,0,255)
								.then(() => console.log("Success"))
								.catch(error => console.log(error));
						});
					});
				
			});

 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://documentcloud.adobe.com') does not match the recipient window's origin ('https://www.vaned.com').
sendMessage @ ViewSDKInterface.js:1
_sendMessageHelper @ ViewSDKInterface.js:1
sendMessage @ ViewSDKInterface.js:1
sendCommand @ ViewSDKInterface.js:1
CommandManager.executeCommand @ ViewSDKInterface.js:1
CommandManager.gotoLocation @ ViewSDKInterface.js:1

Joel Geraci
Community Expert
Community Expert
September 14, 2020

If your web site is public, please send the link so I can take a look. I'm not quite understanding the behavior based on your description. If not, can you share a short video showing me what you mean?