By adding ?json=https://catfact.ninja/fact query at
the end of iframe src you will be able to fetch from URL at widgets without additional
scripts. This applies to editor page as well, the following link will fetch the url at
the editor:{" "}
https://jsoncrack.com/editor?json=https://catfact.ninja/fact
See the Pen Untitled by Aykut
Saraç (@AykutSarac) on{" "}
CodePen.
# Embed Saved JSON
Just like fetching from URL above, you can embed saved public json by adding the json
id to "json" query{" "}
?json=639b65c5a82efc29a24b2de2
See the Pen Untitled by Aykut
Saraç (@AykutSarac) on{" "}
CodePen.
# Communicating with API
◼︎ Post Message to Embed
Communicating with the embed is possible with{" "}
MessagePort
, you should pass an object consist of "json" and "options" key
where json is a string and options is an object that may contain the following:
{`{\n\ttheme: "light" | "dark",\n\tdirection: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}`}
See the Pen Untitled by Aykut
Saraç (@AykutSarac) on{" "}
CodePen.
◼︎ On Page Load
⚠️ Important! - iframe should be defined before the script tag
⚠️ Note - postMessage should be delayed using setTimeout
To display JSON on load event, you should post json into iframe using it's onload
event like in the example. Make sure to use{" "}
setTimeout when loading data and set a time around
500ms otherwise it won't work.
See the Pen Untitled by Aykut
Saraç (@AykutSarac) on{" "}
CodePen.
);
};
export default Docs;