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
Related
I am trying to change my iframe src and reload the iframe with the following code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#changeframe').click(function () {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
</script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>
When I click "Change" on the button nothing happens. What I am doing wrong?
The order does matter.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>
// Go Last since changeframe hasn't exist yet.
<script>
$('#changeframe').click(function () {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
</script>
If the code is as it is in your example, you need to wrap the jQuery in
$(function() { ... }); or move it below the html since the button
does not exist when the script runs
Look in the console. You MAY not be allowed to change the src of an iframe containing a url from another domain - some browsers like IE can throw a security exception. You could have access denied in the console
Some websites do not allow their pages to be framed. It is not the case in your example but would for example give errors if you try to load google in a frame
$(function() {
$('#changeframe').click(function() {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>
Using a link - no need for jQuery (same if the button above was submitting a form, target iframename):
Change
<iframe name="declinedframe" id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>
If you MUST use jQuery for the link give it the ID of changeframe use
$(function() {
$('#changeframe').on("click",function(e) {
e.preventDefault(); // cancel the link
$('#declinedframe').attr('src', this.href );
});
});
How to get full url which starts url with http://sin1.g.adnxs.com
here is my code
<div id="testingurl">
<div class="ads98E6LYS20621080">
<!-- we are getting this script dynamically -->
<iframe src="http://testing.com">
if the anchor link start with http://sin1.g.adnxs.com then alert
</iframe>
<!-- we are getting this script dynamically -->
</div>
</div>
if(window.location.origin == 'http://sin1.g.adnxs.com'){
alert('some alert');
}
Use this logic
$( document ).ready(function() {
if (window.location.href.startsWith('http://sin1.g.adnxs.com')){
alert('Your message') ;
}
});
Are you looking something like this:
if (window.location.href.indexOf("http://www.sin1.g.adnxs.com") > -1) {
alert(window.location.href);
}
As other suggested, you can use window.location.origin in order to get that url
Example:
if(window.location.origin === 'http://sin1.g.adnxs.com'){
alert('alert');
}
Generally you can use window.location for:
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of current page
window.location.protocol returns the web protocol used (http:// or https://)
window.location.assign loads a new document
More info can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
EDIT:
Please have a look at the following example.
In case you have two web pages, parent.html and content.html and content.html is
displayed within parent.html using an iframe.
If you want check the URL of parent.html within content.html you can use the following script:
-------------------------- parent.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
</style>
<script>
window.name = 'parent';
</script>
</head>
<body>
PARENT
<iframe src="content.html" width="200" height="200"></iframe>
</body>
</html>
-------------------------- content.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
background-color: red;
}
</style>
<script>
app = {
start: function () {
window.name = 'content';
var parent = window.parent;
console.log(parent.name);
if (parent.location.origin === 'http://sin1.g.adnxs.com') {
alert('alert');
}
}
};
</script>
</head>
<body onload="app.start();">
CONTENT
</body>
</html>
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.
I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its src attribute.
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>