Develop Reference

postMessage gets sometimes received from both pages under the same domain

I have the code below:
LWC 1:
html
<template if:true={displayPage}>
<iframe class="iframe" src={url} onload={onload} frameborder="0" scrolling="no" width="100%" height="650px"></iframe>
</template>
js
url = 'www.siteA.com/main.html'
onload() {
let objStr = JSON.stringify({"messageToStringify"});
this.template.querySelector(".iframe").contentWindow.postMessage(objStr,this.url);
}
LWC 2:
html
<template if:true={displayPage}>
<iframe class="iframe" src={url} onload={onload} frameborder="0" scrolling="no" width="100%" height="650px"></iframe>
</template>
js
url = 'www.siteA.com/subPage.html'
onload(){
let objStr = JSON.stringify({"messageToStringify"});
this.template.querySelector(".iframe").contentWindow.postMessage(objStr,this.url);
}
Now when each page (main and subPage) receive the message event, process the code.
The event listener starts like this:
window.addEventListener("message", (event) => {....}
In LWC 1, it behaves as expected, BUT when sometimes when LWC 2 runs, and posts the message, the event is caught by the main.html event listener, instead of the subPage.html. If I refresh the page couple of times then the subPage.html receives the event as expected.
My question is how can I make sure that the postMessage from each LWC is only listened by the relevant page on the external site? Or could the cause be something else?
Thank you for any help :)

Is it possible to rotate an iframe, and then the content inside it, separately, to achieve the effect of a bottom-bound scrollbar?

Is it possible to rotate an iframe, and then the content inside it, separately, to achieve the effect of a bottom-bound scrollbar? The research I've done on this hasn't clearly stated if its possible or what this would look like, but I've been trying to create an effect of a chat box, always being scrolled to the available bottom to see new messages without scrolling down every time.
<div class="demo">
<iframe src="page1.php" style="background-color: purple" width="1200" height="500" scrolling="yes" name="myIframe" ;
id="myIframe" ; class="demo"></iframe>
</div>
<form method="post" action="page2.php"/>
<script>
const iframe = document.querySelector('iframe');
document.querySelector('button').addEventListener('click', function () {
iframe.contentWindow.scrollTo(0, iframe.contentDocument.documentElement.scrollHeight);
})
</script>

remove div or iframe on click

There is a iframe fb group like, and need to hide it on click, but jQuery doesnt work
<script>
$(".closeFrame").click(function(){
$("#test").remove();
});
</script>
<div id = "test" class='like-btn'>
<iframe = "#" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

First of all, you need to understand the difference between the two elements: the button is the one that has to be clicked and the other element (the div or the iframe) is the one that is going to be hidden. It is important to understand this correctly in order to code the script properly.
Javascript code (using jQuery)
$(".hide").click(function () {
$(".elementtohide").hide();
});
See it in action: JSFiddle
Explanation
The idea is to attach an event to the button that has to be clicked in order to receive the user's click (this is made with the jQuery method called .click()). Inside that, we must especify what is going to happen when the click is done, so we make a call to the jQuery method called .hide() in order to hide the element (I have used a div but you can use an iframe or whatever you want).
Note: as mentioned in comments, .hide() and .remove() have different behaviours: the first one just adds the style display: none to the element and the second removes the element from the DOM, which means that if you had to show it again, you would have to create it. Use the one that better fits your needs.

A code like this can work
<div id = "test" class='like-btn'>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
but
When you click into an iframe you will click on another part of the world so will not work so the code above will work only if the element isn't an iframe(if is a DIV can work)
so
the solution should be
<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

How to use iframe with blur and focus

I want to give action to iframe with blur and focus,
The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.
action should be infocus or outfocus.
for this command I am writing,
<div class="andr_app">
<iframe src=" <%= request.getContextPath()%>/images/mob_empty.png" width="400px" height="800px" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
</div>
Please help me in this.

The iFrame element doesn't have focus or blur events, so you need to use the window.
var iframe = document.getElementById('iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.onfocus = function(){
//focussed
}
iframeWindow.onblur = function(){
//blurred
}
Reference: answer

Finally I got my answer,but not in iframe.
I change iframe to object,
<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no">
</object>

Why is jquery concatenating string twice?

I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?

Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');

You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/