Table of contents
TOC
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Zuletzt aktualisiert: 25.07.2018

Erstellen von absolut positionierten Elementen

Gilt für: Privatanwender-Notizbücher auf OneDrive | Enterprise-Notizbücher auf Office 365

Das „body“-Element einer OneNote-Seite kann mehrere direkt untergeordnete Elemente des Typs div, img oder object enthalten, die unabhängig voneinander auf der Seite positioniert werden können.

Attribute und Positionierungs-Verhalten

Verwenden Sie die Attribute data-absolute-enabled und style , um absolut positionierte Elemente auf einer Seite zu erstellen:

  • Das Text-Element muss data-absolute-enabled="true"angeben. Fehlt diese Eigenschaft oder ist sie auf false gesetzt, werden alle „body“-Inhalte in einem absolut positionierten „div“-Element _default gerendert, das von der API erstellt wird. Dabei werden alle Positionseinstellungen ignoriert.

  • Nur div, imgund object Elemente können absolut positionierte Elemente sein.

  • Absolut positionierte Elemente müssen style="position:absolute"angeben.

  • Absolut positionierte Elemente müssen direkte Kinder des body Elements sein. Alle direkten Kinder des Textes, die nicht absolut positioniert sind div, img, oder object Elemente werden als statischer Inhalt innerhalb des absolut positionierten _default Div gerendert.

  • Absolut positionierte Elemente werden an den festgelegten oberen und linken Koordinaten relativ zur Startposition 0:0 in der linken oberen Ecke der Seite positioniert, über dem Titelbereich.

  • Wenn ein absolut positioniertes Element die obere oder linke Koordinate weglässt, wird die fehlende Koordinate auf den Standardwert gesetzt: top:120px oder left:48px. Diese Standardkoordinaten geben eine Position direkt unter dem Titelbereich an. Beachten Sie, dass das Weglassen von Koordinaten dazu führen kann, dass Elemente übereinander gestapelt werden.

  • Absolut positionierte Elemente können nicht geschachtelt werden oder positionierte Elemente enthalten. Die API ignoriert alle für geschachtelte Elemente innerhalb eines absolut positionierten „div“-Elements angegebenen Positionseinstellungen, rendert die geschachtelten Inhalte innerhalb des absolut positionierten übergeordneten „div“-Elements und gibt eine Warnung in der Eigenschaft api.diagnostics in der Antwort zurück.


Beispiel: Das folgende Beispiel enthält ein direktes p Kind, ein absolut positioniertes div und ein nicht absolut positioniertes div.

Eingabe-HTML-Code

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

Das API rendert das nicht absolut positionierte Div in das Standard-Div. Beachten Sie, dass die verschachtelten <div> -Tags verworfen werden, da sie keine semantischen Informationen definieren (wie z.B. data-id).

Ausgabe-HTML-Code

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

Beispiel: Das folgende Beispiel erzeugt eine Seite, die ein absolut positioniertes Div und ein absolut positioniertes Bild enthält.


Eingabe-HTML-Code

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

Die OneNote-API wertet das eingegebene HTML aus und bewahrt alle semantischen Inhalte und alle strukturellen Informationen, die von OneNote unterstützt werden. Die resultierende Seite wird gerendert, wie in der folgenden Abbildung gezeigt (aber ohne die sichtbaren Ränder für das Div und die Abbildung).

Resultierende Seite mit absolut positioniertem Div und Abbildung

Beachten Sie die Änderungen am nicht beitragenden, geschachtelten Div aus dem Eingabe-HTML. Die API behält den Inhalt des Divs bei, verwirft aber die <div> Tags, da das Div keine semantischen Informationen definiert (z.B. data-id).

Weitere Informationen dazu, wie die OneNote-API Eingabe-HTML und Ausgabe-HTML verarbeitet, finden Sie unter Eingabe- und Ausgabe-HTML auf OneNote-Seiten.

Unterstützte CSS-Formatattribute

Alle absolut positionierten Elemente können obere und linke Positionen angeben. Für „div“-Elemente und Bilder lässt sich die Breite, für Bilder zusätzlich auch die Höhe festlegen. Beispiel:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
AttributUnterstütztes ElementBeschreibung
obendiv, img, objektY-Koordinate des oberen Rands des Elements, anzugeben ausschließlich in Pixel. Standard ist 120 Pixel.

Beispiel: top:140px

linksdiv, img, objektX-Koordinate des linken Rands des Elements, anzugeben ausschließlich in Pixel Die Standardeinstellung ist 48 Pixel.

Beispiel: left:95px

Breitediv, imgDie Breite des Elements, anzugeben ausschließlich in Pixel.

Beispiel: width:480px

HöheimgDie Höhe des Elements, anzugeben ausschließlich in Pixel. Die Höhe von „div“-Elementen wird zur Laufzeit berechnet; angegebene Höhenwerte werden ignoriert.

Beispiel: height:665px

Andere Positionsattribute, beispielsweise z-index, werden ignoriert. Absolut positionierte Bilder können entweder das Attribut data-render-src oder src verwenden.

Informationen in der Antwort

Die OneNote-API gibt in der Antwort die nachfolgenden Informationen zurück.

AntwortdatenBeschreibung
ErfolgscodeHTTP-Statuscode 201 für eine erfolgreiche POST-Anforderung, HTTP-Statuscode 204 für eine erfolgreiche PATCH-Anforderung.
Fehler oder Warnungen

Unter folgenden Bedingungen erhalten Sie eine Warnung in der api.diagnostics-Eigenschaft der Antwort:

  • Das style="position:absolute" Attribut wird auf einem Element angegeben, aber das body Element gibt nicht data-absolute-enabled="true"an. Alle Positionseinstellungen werden ignoriert.
  • Das style="position:absolute"-Attribut wird für ein Element angegeben, das kein direktes Kind des Text-Elementes ist. Wenn das Element ein div, img, oder objectist, machen Sie es zu einem direkten Kind des Textes, sonst werden die Positionseinstellungen ignoriert.
  • Das style="position:absolute" Attribut wird auf einem Element angegeben und ist kein div, img, und `object Element.
Header „X-CorrelationId“Ein globaler Bezeichner (GUID), über den die Anforderung eindeutig identifiziert wird. Sie können diesen Wert zusammen mit dem Wert des Datum-Headers verwenden, wenn Sie mit dem Microsoft-Support arbeiten, um Probleme zu beheben.

Berechtigungen

Sie müssen zum Erstellen oder Aktualisieren der OneNote-Seiten die entsprechenden Berechtigungen anfordern. Wählen Sie die unterste Ebene an Berechtigungen aus, die Ihre App für ihre Arbeit benötigt.

Berechtigungen für POST-Seiten

PlattformBerechtigungsbereich
Consumeroffice.onenote_create, office.onenote_update_by_app, office.onenote_update
UnternehmenNotes.Create, Notes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Berechtigungen für PATCH-Seiten

PlattformBerechtigungsbereich
Consumeroffice.onenote_update_by_app, office.onenote_update
UnternehmenNotes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Weitere Informationen zu Berechtigungsbereichen und deren Funktionsweise finden Sie unter OneNote-Berechtigungsbereiche.

Weitere Ressourcen

© 2018 Microsoft