IFrame Usage

[GOwnby]

So I have been trying to use this great little library to draw a selection box on an Iframe element which has loaded a pdf document with a little trouble getting the selection box to show on top of the iframe element itself.

If you have any advice using this library with Iframe's it would be greatly appreciated. I've read online that people run into similar problems with an Iframe's ContentDocument when the script has not waited for the page to load. At this point in my code I have dynamically created that Iframe element in Javascript and waited for it to load before running my function. See below (:

`

$('document').ready(function(){

var iframe = document.createElement("iframe");
var fileString = "/media/documents/" + document.getElementById("requestID").innerText + ".pdf"
iframe.setAttribute("id", "iframe");
iframe.setAttribute("src", fileString);
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "100%");
iframe.setAttribute("scrolling", "auto");

document.body.appendChild(iframe);

if (iframe.contentDocument) {

var iframeDoc = iframe.contentDocument;

var cssLink = '{% load static %}<link rel="stylesheet" href="{% static "stylesheets/FrameEditor.css" %}" />'
$('head', iframeDoc).append(cssLink);

const selection = new SelectionArea({

// document object - if you want to use it within an embed document (or iframe).
document: iframeDoc,

// Class for the selection-area element.
class: 'selection-area',

// Query selector or dom-node to set up container for the selection-area element.
container: iframeDoc.body,

// Query selectors for elements which can be selected.
selectables: [],

// Query selectors for elements from where a selection can be started from.
startareas: [iframeDoc.body],

// Query selectors for elements which will be used as boundaries for the selection.
boundaries: [iframeDoc.body],

// px, how many pixels the point should move before starting the selection (combined distance).
// Or specifiy the threshold for each axis by passing an object like {x: <number>, y: <number>}.
startThreshold: 10,

// Enable / disable touch support
allowTouch: true,

// On which point an element should be selected.
// Available modes are cover (cover the entire element), center (touch the center) or
// the default mode is touch (just touching it).
intersect: 'touch',

// Specifies what should be done if already selected elements get selected again.
//   invert: Invert selection for elements which were already selected
//   keep: Make stored elements (by keepSelectio()) 'fix'
//   drop: Remove stored elements after they have been touched
overlap: 'invert',

// Configuration in case a selectable gets just clicked.
singleTap: {

    // Enable single-click selection (Also disables range-selection via shift + ctrl).
    allow: true,

    // 'native' (element was mouse-event target) or 'touch' (element visually touched).
    intersect: 'native'
},

// Scroll configuration.
scrolling: {

    // On scrollable areas the number on px per frame is devided by this amount.
    // Default is 10 to provide a enjoyable scroll experience.
    speedDivider: 10,

    // Browsers handle mouse-wheel events differently, this number will be used as 
    // numerator to calculate the mount of px while scrolling manually: manualScrollSpeed / scrollSpeedDivider.
    manualSpeed: 750
}
});
};
});`

Which properly loads a pdf in an iframe, and the script passed to the Iframe document head contains the selectionarea css written in this library. Now I may be a little confused on the document and container, but this code substituted the regular window.document and with the body element as a container seemed to work fine.

I decided to submit this version of my code because it runs no errors on the browser console. As though the selection area is not defined on the iframe. I also tried to run the css inline in the header like and add it to the iframe document like so

$("#iframe").contents().find("head")[0].appendChild($('#cssID')[0]);

I also tried setting the document field to window.document as shown in the example and setting the container to the body and adding the iframe as a selectable element.

` document: window.document,

// Class for the selection-area element.
class: 'selection-area',

// Query selector or dom-node to set up container for the selection-area element.
container: 'body',

// Query selectors for elements which can be selected.
selectables: ['iframe'],

// Query selectors for elements from where a selection can be started from.
startareas: ['html'],

// Query selectors for elements which will be used as boundaries for the selection.
boundaries: ['html'],`

where the iframe element resides within the main document body.

Thanks!