javascript - Page won't load through iframe? - Stack Overflow

admin管理员组

文章数量:1302272

I have this image resize tool that I got from Bulk Resize Photos. I need to add it to my CMS feature called a Participant Centre.

For some reason the code itself won't work in the participant centre (it shows up blank), but it works in HTML pages outside of the Participant centre. So I thought maybe an iframe would work.

Now the frame of the iframe shows, but the content does not.

HTML:

<div id="BulkResizePhotosEmbed"></div>
<script type="text/javascript" src=".js">
</script>
<script>
bulkresizephotos.load({ "resize_type": "exact", "resize_value": "300", "secondary_resize_value": "400", "quality_level": "0.5", "extension": "jpg", "preserve_aspect_ratio": true, "transparent_background": true, "background_color": "ffffff" });
</script>

I have the above code in a separate html doc that is hosted on the same server as the Participant Centre.

HTML:

<iframe src=".html"></iframe>

I've also tried making the above link a secured link (https) but it still won't load. I tried it in a js fiddle and it didn't work there either. Now I don't think the Participant Centre is blocking any javascript codes because it has a thermometer and fundraising dollars that updates dynamically. I looked at the Console log and I'm not getting any errors.

Any help would be immensely appreciated!

Thanks

I have this image resize tool that I got from Bulk Resize Photos. I need to add it to my CMS feature called a Participant Centre.

For some reason the code itself won't work in the participant centre (it shows up blank), but it works in HTML pages outside of the Participant centre. So I thought maybe an iframe would work.

Now the frame of the iframe shows, but the content does not.

HTML:

<div id="BulkResizePhotosEmbed"></div>
<script type="text/javascript" src="https://bulkresizephotos./js/integration.js">
</script>
<script>
bulkresizephotos.load({ "resize_type": "exact", "resize_value": "300", "secondary_resize_value": "400", "quality_level": "0.5", "extension": "jpg", "preserve_aspect_ratio": true, "transparent_background": true, "background_color": "ffffff" });
</script>

I have the above code in a separate html doc that is hosted on the same server as the Participant Centre.

HTML:

<iframe src="http://www.supportcbcf./site/PageNavigator/reus_image_resize.html"></iframe>

I've also tried making the above link a secured link (https) but it still won't load. I tried it in a js fiddle and it didn't work there either. Now I don't think the Participant Centre is blocking any javascript codes because it has a thermometer and fundraising dollars that updates dynamically. I looked at the Console log and I'm not getting any errors.

Any help would be immensely appreciated!

Thanks

• javascript
• html
• iframe

Share Follow asked Apr 12, 2018 at 20:02 SorryEhSorryEh 92822 gold badges1919 silver badges4848 bronze badges 4

• 2 It's impossible. The website you are trying to embed does not allow it. Open your browser console to see the error ( F12) => Refused to display 'https://...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.facebook. *.salesforce. *.convio *.google. *.force. facebook. salesforce. convio google. force.". – blex Commented Apr 12, 2018 at 20:06
• Hi @blex thanks for your reply! I checked the console and the only error i see is for JSON.parse and Janrain_Config---the janrain has always had issues, is the JSON.parse talking about my code? is that why it says anonymous? – SorryEh Commented Apr 12, 2018 at 20:08
• ohhh wow that's weird I didn't see that message. Thanks Blex! Can you post that as an answer and I'll check this off. I know of a work around to just link people to the tool instead – SorryEh Commented Apr 12, 2018 at 20:08
• Possible duplicate of Url is not loading in iFrame Blank Screen – Ivar Commented Apr 12, 2018 at 20:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

In order to make their website more secure, and to avoid being displayed inside another website (which could deteriorate the user experience, or even make the user think that the content is from another site), some of them have a Content Security Policy, defining the allowed frame-ancestors.

This allows them to notify the browser that they only want to be embedded in certain sites.

If you open your browser console, you'll see this error:

Refused to display 'https://...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.facebook. *.salesforce. *.convio *.google. *.force. facebook. salesforce. convio google. force.".

If your website's domain name does not match the rule, your browser will block that page.

Here's an example of why this feature is good:

Imagine evilwebsite. wants more Facebook likes. They could just embed an iframe of their Facebook page on their site, make it opacity: 0, and place it in front of their content, with a button positioned right behind the invisible "Like" button. People who click on it would actually click on the "Like" button. Free likes! That's why you cannot embed a regular Facebook page on your site.

i think the the website don't allow JS so there is no answer for this question

本文标签： javascriptPage won39t load through iframeStack Overflow