We use cookies to ensure you get the best experience on our website
صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
0ct0pu5
/
ladybird
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

LibWeb: Implement getting and setting element.innerHTML

Getting the innerHTML property will recurse through the subtree inside
the element and serialize it into a string as it goes.

Setting it will parse the set value as an HTML fragment. It will then
remove all current children of the element and replace them with all
the children inside the parsed fragment.

Setting element.innerHTML will currently force a complete rebuild of
the document's layout tree.

This is pretty neat! :^)
Andreas Kling 5 سال پیش
والد
632cc53e2c
کامیت
68b04d5c78
11فایلهای تغییر یافته به همراه192 افزوده شده و 5 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 17 0
      Base/home/anon/www/innerHTML.html
  2. 1 0
      Base/home/anon/www/welcome.html
  3. 65 0
      Libraries/LibWeb/Bindings/ElementWrapper.cpp
  4. 47 0
      Libraries/LibWeb/Bindings/ElementWrapper.h
  5. 1 1
      Libraries/LibWeb/Bindings/HTMLCanvasElementWrapper.cpp
  6. 2 2
      Libraries/LibWeb/Bindings/HTMLCanvasElementWrapper.h
  7. 2 0
      Libraries/LibWeb/Bindings/NodeWrapper.cpp
  8. 50 2
      Libraries/LibWeb/DOM/Element.cpp
  9. 5 0
      Libraries/LibWeb/DOM/Element.h
  10. 1 0
      Libraries/LibWeb/Forward.h
  11. 1 0
      Libraries/LibWeb/Makefile

+ 17 - 0
Base/home/anon/www/innerHTML.html
مشاهده فایل 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE>
 
+<html>
 
+<head>
 
+</head>
 
+<body>
 
+<div id=clicky style="background-color: red; color: white; border: 1px solid black;">Click me</div>
 
+<div id="foo">This has <b>some HTML</b> inside it!</div>
 
+<script type="text/javascript">
 
+function hax() {
 
+    var foo = document.getElementById("foo");
 
+    console.log("trying");
 
+    foo.innerHTML = 'But now the HTML has changed!';
 
+}
 
+document.getElementById("clicky").addEventListener("mousedown", hax);
 
+</script>
 
+</body>
 
+</html>

+ 1 - 0
Base/home/anon/www/welcome.html
مشاهده فایل 

@@ -23,6 +23,7 @@ h1 {
 
     <p>This is a very simple browser built on the LibWeb engine.</p>
 
     <p>This is a very simple browser built on the LibWeb engine.</p>
 
     <p>Some small test pages:</p>
 
     <p>Some small test pages:</p>
 
     <ul>
 
     <ul>
 
+        <li><a href="innerHTML.html">innerHTML property test</a></li>
 
         <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
 
         <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
 
         <li><a href="demo.html">fun demo</a></li>
 
         <li><a href="demo.html">fun demo</a></li>
 
         <li><a href="raf.html">requestAnimationFrame test</a></li>
 
         <li><a href="raf.html">requestAnimationFrame test</a></li>

+ 65 - 0
Libraries/LibWeb/Bindings/ElementWrapper.cpp
مشاهده فایل 

@@ -0,0 +1,65 @@
 
+/*
 
+ * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
 
+ * All rights reserved.
 
+ *
 
+ * Redistribution and use in source and binary forms, with or without
 
+ * modification, are permitted provided that the following conditions are met:
 
+ *
 
+ * 1. Redistributions of source code must retain the above copyright notice, this
 
+ *    list of conditions and the following disclaimer.
 
+ *
 
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
 
+ *    this list of conditions and the following disclaimer in the documentation
 
+ *    and/or other materials provided with the distribution.
 
+ *
 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
 
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
+ */
 
+
 
+#include <AK/FlyString.h>
 
+#include <AK/Function.h>
 
+#include <LibJS/Runtime/PrimitiveString.h>
 
+#include <LibJS/Runtime/Value.h>
 
+#include <LibWeb/Bindings/ElementWrapper.h>
 
+#include <LibWeb/DOM/Element.h>
 
+
 
+namespace Web {
 
+namespace Bindings {
 
+
 
+ElementWrapper::ElementWrapper(Element& element)
 
+    : NodeWrapper(element)
 
+{
 
+    put_native_property(
 
+        "innerHTML",
 
+        [this](JS::Object*) {
 
+            return JS::js_string(heap(), node().inner_html());
 
+        },
 
+        [this](JS::Object*, JS::Value value) {
 
+            node().set_inner_html(value.to_string());
 
+        });
 
+}
 
+
 
+ElementWrapper::~ElementWrapper()
 
+{
 
+}
 
+
 
+Element& ElementWrapper::node()
 
+{
 
+    return static_cast<Element&>(NodeWrapper::node());
 
+}
 
+
 
+const Element& ElementWrapper::node() const
 
+{
 
+    return static_cast<const Element&>(NodeWrapper::node());
 
+}
 
+
 
+}
 
+}

+ 47 - 0
Libraries/LibWeb/Bindings/ElementWrapper.h
مشاهده فایل 

@@ -0,0 +1,47 @@
 
+/*
 
+ * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
 
+ * All rights reserved.
 
+ *
 
+ * Redistribution and use in source and binary forms, with or without
 
+ * modification, are permitted provided that the following conditions are met:
 
+ *
 
+ * 1. Redistributions of source code must retain the above copyright notice, this
 
+ *    list of conditions and the following disclaimer.
 
+ *
 
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
 
+ *    this list of conditions and the following disclaimer in the documentation
 
+ *    and/or other materials provided with the distribution.
 
+ *
 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
 
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
+ */
 
+
 
+#pragma once
 
+
 
+#include <LibWeb/Bindings/NodeWrapper.h>
 
+
 
+namespace Web {
 
+namespace Bindings {
 
+
 
+class ElementWrapper : public NodeWrapper {
 
+public:
 
+    explicit ElementWrapper(Element&);
 
+    virtual ~ElementWrapper() override;
 
+
 
+    Element& node();
 
+    const Element& node() const;
 
+
 
+private:
 
+    virtual const char* class_name() const override { return "ElementWrapper"; }
 
+};
 
+
 
+}
 
+}

+ 1 - 1
Libraries/LibWeb/Bindings/HTMLCanvasElementWrapper.cpp
مشاهده فایل 

@@ -37,7 +37,7 @@ namespace Web {
 
 namespace Bindings {
 
 namespace Bindings {
 
 
 
 HTMLCanvasElementWrapper::HTMLCanvasElementWrapper(HTMLCanvasElement& element)
 
 HTMLCanvasElementWrapper::HTMLCanvasElementWrapper(HTMLCanvasElement& element)
 
-    : NodeWrapper(element)
 
+    : ElementWrapper(element)
 
 {
 
 {
 
     put_native_function("getContext", [this](JS::Object*, const Vector<JS::Value>& arguments) -> JS::Value {
 
     put_native_function("getContext", [this](JS::Object*, const Vector<JS::Value>& arguments) -> JS::Value {
 
         if (arguments.size() >= 1) {
 
         if (arguments.size() >= 1) {

+ 2 - 2
Libraries/LibWeb/Bindings/HTMLCanvasElementWrapper.h
مشاهده فایل 

@@ -26,12 +26,12 @@
 
 
 
 #pragma once
 
 #pragma once
 
 
 
-#include <LibWeb/Bindings/NodeWrapper.h>
 
+#include <LibWeb/Bindings/ElementWrapper.h>
 
 
 
 namespace Web {
 
 namespace Web {
 
 namespace Bindings {
 
 namespace Bindings {
 
 
 
-class HTMLCanvasElementWrapper : public NodeWrapper {
 
+class HTMLCanvasElementWrapper : public ElementWrapper {
 
 public:
 
 public:
 
     explicit HTMLCanvasElementWrapper(HTMLCanvasElement&);
 
     explicit HTMLCanvasElementWrapper(HTMLCanvasElement&);
 
     virtual ~HTMLCanvasElementWrapper() override;
 
     virtual ~HTMLCanvasElementWrapper() override;

+ 2 - 0
Libraries/LibWeb/Bindings/NodeWrapper.cpp
مشاهده فایل 

@@ -43,6 +43,8 @@ NodeWrapper* wrap(JS::Heap& heap, Node& node)
 
         return static_cast<NodeWrapper*>(wrap_impl(heap, to<Document>(node)));
 
         return static_cast<NodeWrapper*>(wrap_impl(heap, to<Document>(node)));
 
     if (is<HTMLCanvasElement>(node))
 
     if (is<HTMLCanvasElement>(node))
 
         return static_cast<NodeWrapper*>(wrap_impl(heap, to<HTMLCanvasElement>(node)));
 
         return static_cast<NodeWrapper*>(wrap_impl(heap, to<HTMLCanvasElement>(node)));
 
+    if (is<Element>(node))
 
+        return static_cast<NodeWrapper*>(wrap_impl(heap, to<Element>(node)));
 
     return static_cast<NodeWrapper*>(wrap_impl(heap, node));
 
     return static_cast<NodeWrapper*>(wrap_impl(heap, node));
 
 }
 
 }

+ 50 - 2
Libraries/LibWeb/DOM/Element.cpp
مشاهده فایل 

@@ -24,11 +24,15 @@
 
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
  */
 
  */
 
 
 
-#include <LibWeb/CSS/StyleResolver.h>
 
-#include <LibWeb/CSS/PropertyID.h>
 
+#include <AK/StringBuilder.h>
 
 #include <LibWeb/CSS/Length.h>
 
 #include <LibWeb/CSS/Length.h>
 
+#include <LibWeb/CSS/PropertyID.h>
 
+#include <LibWeb/CSS/StyleResolver.h>
 
 #include <LibWeb/DOM/Document.h>
 
 #include <LibWeb/DOM/Document.h>
 
+#include <LibWeb/DOM/DocumentFragment.h>
 
 #include <LibWeb/DOM/Element.h>
 
 #include <LibWeb/DOM/Element.h>
 
+#include <LibWeb/DOM/Text.h>
 
+#include <LibWeb/Dump.h>
 
 #include <LibWeb/Layout/LayoutBlock.h>
 
 #include <LibWeb/Layout/LayoutBlock.h>
 
 #include <LibWeb/Layout/LayoutInline.h>
 
 #include <LibWeb/Layout/LayoutInline.h>
 
 #include <LibWeb/Layout/LayoutListItem.h>
 
 #include <LibWeb/Layout/LayoutListItem.h>
 
@@ -36,6 +40,7 @@
 
 #include <LibWeb/Layout/LayoutTableCell.h>
 
 #include <LibWeb/Layout/LayoutTableCell.h>
 
 #include <LibWeb/Layout/LayoutTableRow.h>
 
 #include <LibWeb/Layout/LayoutTableRow.h>
 
 #include <LibWeb/Layout/LayoutTreeBuilder.h>
 
 #include <LibWeb/Layout/LayoutTreeBuilder.h>
 
+#include <LibWeb/Parser/HTMLParser.h>
 
 
 
 namespace Web {
 
 namespace Web {
 
 
 
@@ -218,4 +223,47 @@ NonnullRefPtr<StyleProperties> Element::computed_style()
 
     return properties;
 
     return properties;
 
 }
 
 }
 
 
 
+void Element::set_inner_html(StringView markup)
 
+{
 
+    auto fragment = parse_html_fragment(document(), markup);
 
+    remove_all_children();
 
+    if (!fragment)
 
+        return;
 
+    while (RefPtr<Node> child = fragment->first_child()) {
 
+        fragment->remove_child(*child);
 
+        append_child(*child);
 
+    }
 
+
 
+    set_needs_style_update(true);
 
+    document().schedule_style_update();
 
+    document().invalidate_layout();
 
+}
 
+
 
+String Element::inner_html() const
 
+{
 
+    StringBuilder builder;
 
+
 
+    Function<void(const Node&)> recurse = [&](auto& node) {
 
+        for (auto* child = node.first_child(); child; child = child->next_sibling()) {
 
+            if (child->is_element()) {
 
+                builder.append('<');
 
+                builder.append(to<Element>(*child).tag_name());
 
+                builder.append('>');
 
+
 
+                recurse(*child);
 
+
 
+                builder.append("</");
 
+                builder.append(to<Element>(*child).tag_name());
 
+                builder.append('>');
 
+            }
 
+            if (child->is_text()) {
 
+                builder.append(to<Text>(*child).data());
 
+            }
 
+        }
 
+    };
 
+    recurse(*this);
 
+
 
+    return builder.to_string();
 
+}
 
+
 
 }
 
 }

+ 5 - 0
Libraries/LibWeb/DOM/Element.h
مشاهده فایل 

@@ -55,6 +55,8 @@ private:
 
 
 
 class Element : public ParentNode {
 
 class Element : public ParentNode {
 
 public:
 
 public:
 
+    using WrapperType = Bindings::ElementWrapper;
 
+
 
     Element(Document&, const FlyString& tag_name);
 
     Element(Document&, const FlyString& tag_name);
 
     virtual ~Element() override;
 
     virtual ~Element() override;
 
 
 
@@ -88,6 +90,9 @@ public:
 
     const StyleProperties* resolved_style() const { return m_resolved_style.ptr(); }
 
     const StyleProperties* resolved_style() const { return m_resolved_style.ptr(); }
 
     NonnullRefPtr<StyleProperties> computed_style();
 
     NonnullRefPtr<StyleProperties> computed_style();
 
 
 
+    String inner_html() const;
 
+    void set_inner_html(StringView);
 
+
 
 private:
 
 private:
 
     RefPtr<LayoutNode> create_layout_node(const StyleProperties* parent_style) const override;
 
     RefPtr<LayoutNode> create_layout_node(const StyleProperties* parent_style) const override;

+ 1 - 0
Libraries/LibWeb/Forward.h
مشاهده فایل 

@@ -45,6 +45,7 @@ namespace Bindings {
 
 
 
 class CanvasRenderingContext2DWrapper;
 
 class CanvasRenderingContext2DWrapper;
 
 class DocumentWrapper;
 
 class DocumentWrapper;
 
+class ElementWrapper;
 
 class EventWrapper;
 
 class EventWrapper;
 
 class EventListenerWrapper;
 
 class EventListenerWrapper;
 
 class EventTargetWrapper;
 
 class EventTargetWrapper;

+ 1 - 0
Libraries/LibWeb/Makefile
مشاهده فایل 

@@ -1,6 +1,7 @@
 
 LIBWEB_OBJS = \
 
 LIBWEB_OBJS = \
 
     Bindings/CanvasRenderingContext2DWrapper.o \
 
     Bindings/CanvasRenderingContext2DWrapper.o \
 
     Bindings/DocumentWrapper.o \
 
     Bindings/DocumentWrapper.o \
 
+    Bindings/ElementWrapper.o \
 
     Bindings/EventWrapper.o \
 
     Bindings/EventWrapper.o \
 
     Bindings/EventListenerWrapper.o \
 
     Bindings/EventListenerWrapper.o \
 
     Bindings/EventTargetWrapper.o \
 
     Bindings/EventTargetWrapper.o \

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5