PDF Embed API and DOM manipulation

New Here ,
Sep 11, 2020 Sep 11, 2020

Copy link to clipboard

Copied

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

 

TOPICS
How to, PDF Embed API

Views

133

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 11, 2020 Sep 11, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 11, 2020 Sep 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

Hi Joel, the normal use of this is behind a login, but here's a stripped-down version that illustrates the behavior.

 

https://www.vaned.com/testembed.cfm

 

Each "View PDF" link opens the viewer above itself so that you can see the relevant contract text adjacent to the discussion on the page.  But something always scrolls the page back to top, so if you were looking at one further down the page,  you have to scroll all the way down again after opening the viewer.

 

Maybe the simple answer is to embed a viewer at each location rather than share a single viewer and move it around, but I thought it would be more efficient to do it this way.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

I can't quickly account for the behavior you're seeing but if it were me creating an experience where you have a contract and you want to call attention to different parts of your commentary, I'd set them up where the contract is always visible and that the commentary and the document are side by side. I'd then use events to create an experience such that as you scroll through the commentary, the document automatically scrolls to the right location and as you scroll the contract, the commentary also scrolls to the right area. This is relatively easy to set up and would avoid the problem you are experiencing.

 

If that's not appealing, you can work around the issue by capturing the scroll position of the window prior to showing the PDF, move the embedded view and then programmatically scroll to the same location.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

LATEST

Thanks Joel, I finally identified the problem and it's nothing to do with the Adobe libraries.  So you're welcome to delete this thread if appropriate -- I doubt it'll be useful to other users.

 

Your scrolling scenario sounds fun but would probably require a wider screen than I can count on our users having.

 

Thanks again for your time!

James

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines