I have a website, say example.com, with a subdomain mysub.example.com. I am saving it for local storage on the website www.example.com.
BUT, how do I test my code in my Google Chrome browser?
I can load the file in the subdomain mysub.example.com and look at all the breakpoints.
But how do I look at what is going on in the file I am posting the message to (on www.example.com)? Is it possible to put breakpoints in there using my Google Chrome browser?
If it’s important, these are my two files:
The ‘source’ file on mysub.example.com:
<!DOCTYPE html>
<html>
<head>
<title>Test Cross Domain Main - This is the html on the subdomain</title>
</head>
<body style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000; font-family: 'Arial', sans-serif;">
<iframe style="display: none;" src="http://www.example.com/myxdom/testxdommain.html" ></iframe>
<button onclick="SaveNameToRoot()">Save Name To Local Storage Root</button>
<button onclick="RemoveNameFromRoot()">Remove Name To Local Storage Root</button>
<br />
<label id="name"></label>
</body>
<script type="text/javascript">
function SaveNameToRoot(){
const iframe = document.querySelector("iframe");
const wind = iframe.contentWindow;
const data = {
isSet: true,
slot: "name",
data: "Wibble"
}
wind.postMessage(JSON.stringify(data, "*"));
}
function RemoveNameFromRoot(){
}
// This is stuff coming back from the other window on main
window.addEventListener("message", function(e){
const data = e.data;
});
</script>
</html>
The ‘destination’ file on www.example.com. This is the file I do not know how to inspect with breakpoints:
<script type="text/javascript">
window.addEventListener("message", function(e){
if(e.origin !== "example.com"){
return;
}
const data = JSON.parse(e.data);
if(typeof data.slot !== "undefined"){
if(data.isSet){
if(typeof data.data !== "undefined"){
localStorage.setItem(data.slot, data.data);
}
}else{
}
}
});
</script>>
