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 :)
Related
I have an iframe that is made to simulate normal bing :
<iframe width="100%" height="100%" src="https://bing.com/" name="myFrame" style="position:absolute; top:0; left: 0" ></iframe>
I want to capture input that goes throught it and log it to console. I tried to use this on javascript but it didn't worked.
const keyboard = document.querySelector('.keyboard');
keyboard.addEventListener('keydown', e =>{
console.log('test')
})
Any ideas how can i solve this issue?
I am creating an ionic2 app. in this app i'm calling youtube API to fetch videos from my channel. when response came, it contains all video IDs of my channel. i want to make a list of videos, when user taps on any video, it will play on iframe created just above the list. my code so far looks like this.
<ion-item *ngFor="let video of videosListItems">
<button ion-button (click)="playVideo($event, video)">{{video.snippet.title}}</button>
</ion-item>
above code generates a list of videos. when user tap on any list item then playVideo function called.
playVideo(event, video){
let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
this.videoUrl = playableUrl;
}
videoUrl is data member of class in which playVideo function exists. now whenever playVideo function called then it updates the video URL to variable this.videoUrl. everything is good so far. but when i use this variable videoUrl in iframe. it does'nt load that video.
<ion-card class="youtube">
<iframe width="560" height="315" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
</ion-card>
how can i do this? Any help would be appreciated.
try this:
playVideo(event, video){
let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
this.videoUrl = playableUrl;
(<HTMLIFrameElement>document.getElementById('videoIframe')).src = this.videoUrl;
}
in html:
<ion-card class="youtube">
<iframe width="560" height="315" id="videoIframe" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
</ion-card>
I came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?
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>
So basically I'm trying to make a button so when you press it, it alerts the url the iframe is on.
My HTML:
<iframe id="iframeid" scrolling="auto" width="100" height="100" src="http://www.google.com" >
</iframe>
<button onclick="myFunction()">Click me</button>
Then for my Javascript I have:
function myFunction() {
alert(document.getElementById('iframeid').contentWindow.location.href);
}
Though when I press it it's not working. When I replace the alert with something else like "Potato" then it will work. Though for some reason it can't get the url, or maybe the frame. Any help accepted!
When the frame is displaying a document on another origin (as in your example), there is no way to get the URL that is being displayed.
The URL might include personal data belonging to the user so your site is prevented from accessing it.
Always look at your JS console: