This code is working in Dreamweaver default browser but not in chrome or firefox. It shows only blank page , without showing google.com. Don't know why! May be the problem is with iFrame. But I have to show something other page in my page. Is there any workaround??
<!DOCTYPE html>
<html>
<head>
<title>booo yeah</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var height = $(window).height();
var width = $(window).width();
$('iframe').width(width);
$('iframe').height(height);
});
</script>
</head>
<body>
<iframe src="http://www.google.com" frameBorder="0"></iframe>
</body>
</html>
Screenshot:http://goo.gl/jTpB2g
On back there is dreamweaver with left side code and right side its default browser showing the working code. In front, there is chrome in which nothing is showing
The website you are trying to display has security that prevents it from being used in iframe. for example <iframe src="http://www.w3schools.com"></iframe> works fine. The problem is not with your browser.
Open you console panel and you can see an error message says:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Google search returns an X-Frame-Options header with SAMEORIGIN, that meas this page can only be displayed in a frame on the same origin as the page itself.
See more from X-Frame-Options
Solutions:
If you have access to the site, try set X-Frame-Options to ALLOWALL or simply remove this from http response.
If you are stuck at google, try use Google Custom Search instead, replace your url with this http://www.google.com/custom, which sends 'X-Frame-Options: ALLOWALL ' which allows you to embed this site in your IFRAME.
It's probably not displaying for security reasons.
Same Origin Policy
The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin. This policy dates all the way back to Netscape Navigator 2.0.
Some websites do allow it but Google doesn't. Strange that it's ok with Dreamweaver doing it.
There are ways you can circumvent it (I can't say they'll be suitable for your problem though).
Ways to circumvent the same-origin policy
As ajtrichards said, Google has restrictions due to Same Origin Policy.
Just try another domain you will see that your code works
jsbin.com/UJeHaqe/1/edit
Related
I would like to give a page transition.
In web server (Google side), I prepare an html file like this,
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<h1>Moving</h1>
</head>
<body>
link
<script> window.location.href='https://google.com'</script>
</body>
</html>
Note that using the link link, I can jump to the google page (google.com).
However I got a console message like below and cannot jump automatically with Javascript...
Refused to display 'https://google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I think this is a limitation in Google Apps Script..
Is there anyway to let users jump without clicking the link?
You were able to do it with window.top.location.href.
However, it seems it has been just blocked by Chrome CORS since this month.
I want to get the page in which my iframe is loaded.
However my iframe is sometimes loaded inside an iframe which itself is loaded inside another iframe.
like this:
<html>
<body>
<iframe src="site_a">
<html>
<body>
<iframe src="mysite"></iframe>
</body>
</html>
</iframe>
</body>
</html>
If in the head of "mysite" I try window.top.location.href I get cross-origin errors.
<script>
(function(){
var url = window.top.location.href;
console.log(url);
})();
</script>
gives
Uncaught DOMException: Blocked a frame with origin "mysite" from accessing a cross-origin frame.
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
You can't.
I get cross-origin errors.
And that is why.
Your JavaScript is not allowed to monitor what people do on other websites, even if those other websites put your page in a frame.
I use Pdf.js, I get base64 file from web service (this.attachmentSource), and when I want to add var iframe = "<iframe width=800 height=550 src='" + this.attachmentSource + "' > </iframe>",For some pdfs in google chrome I get iframe empty, but in Mozila everything work fine, who can explain this mystery?
I tracked down the issue
The iframe is being block by chrome detecting insecure content and blocking the iframe from loading. this only occurs when using Chrome, IE Firefox, Safari on PC work fine.
Safari and Chrome also work fine on the iPad. It appears Chrome on PC has a different set of rules and blocks the content. Selecting the shield in the URL title bar allows the content to be displayed. Pressing Ctrl shift J gives some information about what content is being blocked.
wouldn't it be nice if all the browser followed the one set of rules
I happened to notice: server Response Header:
x-frame-options: DENY
The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used.
I was using AWS CloudFront with a Lambda#Edge function already, so I found a solution here: Configuring X-Frame-Options Response Header on AWS CloudFront and S3
If you are using a different server stack, you will have to adjust your server response headers accordingly.
iFrame doesn't support most of the things. For ex: if you have graphs in your application it won't be displayed.Use embed or object instead.
<object data="{{srcUrlTrusted}}" width="100%" height="800">
<embed ng-src="{{srcUrlTrusted}}" width="100%" height="800"> </embed>
</object>
I was having the same issue when trying to embed a PDF. I tried both an <iframe> and <embed> approach, but they still wouldn't open in Chrome.
The solution for me was opening the PDF in Adobe Acrobat and under the "Protect" tab, select "Remove Hidden Information".
I didn't create this PDF, so I am not sure which policy, etc was causing the issue.
Hope this helps!
I'm writing a firefox extension to read out the privacy settings of a facebook user. (not a facebook app!!) To switch between different websites of facebook I used iframes, but this isn't working anymore. I have this problem since 2 weeks.
$('#globalContainer').append('<iframe id="reusable_iframe" src="" width="90%"
height="400" name="reusable_iframe"></iframe>');
//....
$('#reusable_iframe').attr('src', link);
I'm follow the Same origin policy and it was working just fine since a 2 weeks!? an example:
var link = "http://www.facebook.com/editprofile.php?sk=basic";
Now I just get a blank iframe :(
the funny thing is, that if I add "http://www.youtube.com/embed/Qi_AAqi0RZM" or "http://trololololololololololo.com/" to the iframe it's working without a problem... :/
did facebook change the rules for own links in iframes? Is there a workaround? Is there an other way for me to scan different sites with firefox-extensions? i would prefer to stay with content-scripts....
Edit: This is how it looks at firebugs... also funny is that the facebook page http://www.facebook.com/undefined is working however!?
<iframe id="areusable_iframe" width="90%" height="400" name="areusable_iframe" src="http://www.facebook.com/">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
Facebook sends the following response header to the browser:
X-Frame-Options: DENY
This cause all major browsers (even IE8 and higher) to prevent showing it inside frames.
The old way was "frame buster" using JavaScript forcing the page to open as the top window, but it's very unfriendly so it was replaced by this header in most modern websites that don't want to be displayed in frames.
Not much you can do though, sorry.
The "undefined" page is just blank content which is their 404 custom error page as it does not contain the above header, it can be displayed inside frame.
To learn more about the X-Frame-Options header see this documentation.
I try to insert JavaScript code to YAHOO.widget.Dialog.setBody(...), bit this does not work in Chrome (I have Ubuntu) (In Firefox the code is working)
The html file (simple example that not working in chrome browser):
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/container/assets/skins/sam/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.2r1/build/container/container-min.js"></script>
</head>
<body class="yui-skin-sam">
<script type="text/javascript">
previewDialog = new YAHOO.widget.Dialog("previewDialog", { width: "600px", visible: true});
previewDialog.setBody('<h2>h2 text h2'+'<script>'+'alert("alert text alert");'+'<'+'/script>'+'</h2>');
previewDialog.render(document.body);
</script>
</body>
</html>
How can be my code fixed for working in chrome?
(In real project I try to insert more complicated javascript code)
I don't have a solution, but I am having the same problem.
I opened up Google Chrome's built in developer console and see several warnings:
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix?core.apexpages.devmode.url=1:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
SkillsMatrix?core.apexpages.devmode.url=1:3
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
I think the problem (at least for me) is that Chrome is most vigilantly enforcing a "Same Origin Policy" (cf. http://en.wikipedia.org/wiki/Same_origin_policy ).
The Force Times ( http://theforcetimes.wordpress.com/ ) currently writes about using an "AJAX Proxy" which may help to resolve some such issues. (His article is SFDC-centric but perhaps the principle will help if this is the problem you are having and you can establish your own proxy somewhere.)
It requires additional button-min.js and element-min.js with corresponding CSS as well.