I have a page with six ifrmaes inside it. Each frame has individual id, so it is easy to detect the frame. All these frames have commono src. And each source I set
window.onload=function(){
alert(' this has been alerted from Iframe with id#");
}
How can I know the ID of the frame from which the alert is alerting?
Thanks.
You can do it like this:
Frameset:
<html>
<body>
<iframe src="frame.html" id="frameID1" name="frameName1"></iframe>
<iframe src="frame.html" id="frameID2" name="frameName2"></iframe>
<iframe src="frame.html" id="frameID3" name="frameName3"></iframe>
<iframe src="frame.html" id="frameID4" name="frameName4"></iframe>
<iframe src="frame.html" id="frameID5" name="frameName5"></iframe>
<iframe src="frame.html" id="frameID6" name="frameName6"></iframe>
</body>
</html>
Frame:
<html>
<head>
<script type="text/javascript">
window.onload=function() {
alert('This has been alerted from frame with id#: ' + GetFrameID(this.name));
}
function GetFrameID(frameName) {
var frames = top.document.getElementsByTagName('iframe');
if (frames != null) {
for (var i = 0; i < frames.length; i++) {
if (frames[i].name == frameName) return frames[i].id;
}
}
return null;
}
</script>
</head>
<body>
</body>
</html>
Related
I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.
How to call and running function javascript in frame one from other frame.
This is my script :
My main code:
<frameset id="tes" rows="60,*">
<frame id="frame2" src="../oneframe.php" frameborder="0" allowtransparency="true" marginwidth="0" marginright="0"></frame>
<frame id="frame1" src="../twoframe.php" frameborder="0"></frame>
</frameset>
oneframe.php :
<button type="button" onClick="runFunc()">Running</button>
twoframe.php:
<html>
<head>
<title>tes</title>
<script>
function runFunc() {
var x = document.getElementById('target');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="target">This is my target</div>
</body
</html>
Anyone can help me ?
I have an iframe inside a PHP page and I am trying to access a parent element from within the iframe, but always get this error in the Console:
Uncaught DOMException: Blocked a frame with origin
https://subdomain.domain.com from accessing a cross-origin frame.
I have read every single search result on Google's first page around Same Origin policy and Access-Control-Allow-Origin but that doesn't seem to be solving my problem. I am still getting the same error.
Here is what I have done so far:
Added Access-Control-Allow-Origin into my iframe content.
Added document.domain into my iframe content.
Has anybody else had similar problem? What can I do to fix it?
Here is my code:
<?php
header('Access-Control-Allow-Origin: https://b.example.com');
?>
<script>
function receiveMessage(event) {
if (event.origin !== "https://a.example.com")
return;
}
window.addEventListener("message", receiveMessage, false);
</script>
<div>
<button title="Close (Esc)" type="button" class="close">×</button>
</div>
<iframe name="myIframe" class="myIframe"
src="https://b.example.com" width="100%" height="600px"
frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="">
</iframe>
</div>
Script in b.example.com
<script>
window.parent.$('.close').click(function () {
var thisObj = this;
if (!feedbackLoaded) {
$('#openFeedback').click();
feedbackLoaded = true;
$('#feedbackForm .close').click(function () {
window.parent.$.magnificPopup.proto.close.call(thisObj);
});
return false;
} else {
window.parent.$.magnificPopup.proto.close.call(thisObj);
}
});
</script>
Regardless to https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage you can implement communication between your document and iframe.
In this case you have to specify all operations that will be available on parent window. Here is an example:
Parent window:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script>
function receiveMessage(event) {
console.log(event);
if (event.data.message === 'Hello world') {
$('#openFeedback').click();
}
}
window.addEventListener("message", receiveMessage, false);
</script>
<div>
<button title="Close (Esc)" type="button" class="close">×</button>
</div>
<iframe name="myIframe" class="myIframe"
src="http://b.test.dev" width="100%" height="600px"
frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="">
</iframe>
</body>
</html>
And subdomain in iframe:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script>
window.parent.postMessage({message: 'Hello world'}, 'http://test.dev');
</script>
</body>
</html>
Also you should provide some security check for iframe identity like you added in your example. In that case you don't need to add cross-origin header
I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.