i am trying to load www.google.com in an iframe. But i am not getting required results.
Please help me to figure out the error.
here is the jsfiddle.
http://jsfiddle.net/vj04bk4d/
Mostly protected and famous sites have already protected it from grabbing their page inside an iframe. Some others are not, e.g. w3schools.com. you'll see the page appears inside the iframe. That's why it is impossible to do that on protected site. Some say that this is against privacy and policy.
This is frequently done by PTC site.
Please check here for further information:
jQuery/JavaScript: accessing contents of an iframe
(My first stackoverflow answer, so bear with me.)
As I read in this other stackoverflow post:
How do I load a URL specified in a textbox in an iframe?
the problem is not in the code, but in the fact that "some sites refuse to load the page inside an iframe (example: http://google.com)"
I have a similar tool done here:
http://www.carljohansson.net/tools/a-simple-responsive-viewer.php
where I load the url from an input[type=text] to be shown inside an iframe to test the responsiveness of a website. While testing your issue I saw that google wouldn't load either on my page.
Cheers!
Related
I'm new to coding, trying to get https://www.timeanddate.com/ to show up in an iframe with html. I'm not trying to do anything fancy, I just want the site to show up in the iframe. I have a few other sites that I already have working, just having an issue with this one.
I have done some searching, and found that I may not be able to display this site due to them denying embedding on other sites.
Just asking for some assistance with some code to get this to work, if possible.
Thanks in advance.
This is becaused https://timeanddate.com site has the X-Frame-Options header set to SAMEORIGIN.
What this means is that the page can only be iframed on a page the resides on the same domain.
As an example https://timeanddate.com/test could have an IFrame containing the main site on https://timeanddate.com, because they are both from the timeanddate.com domain.
Mozillas documentation for X-Frame-Options
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I have a code snippet that is installed on third party websites. I can't get into the details, but it loads HTML, CSS and JS onto the page through the use of a <script> tag.
Part of the code is a JS function that executes when this link is clicked:
?
If there are JS errors on the page that prevent the function from executing, clicking the link obviously just adds the hash to the URL and takes the user to the top of the page. This is the expected fallback behavior.
However, on one third party site with a multitude of JS errors, clicking the link removes everything after the top level domain, adds the hash, and directs to that page (the home page). For example, the link would take the user from:
http://www.example.com/2010/05/14/very-interesting-blog-post/
to
http://www.example.com/#
Notably, the issue occurs in Firefox and Chrome, but not IE9. I know it may be impossible to properly diagnose the issue without more detailed code, but I'm not at liberty to provide it. I'm just hoping to get some kind of reasonable explanation for this strange browser behavior.
If it helps at all, the site in question is a WordPress blog. Thanks in advance.
EDIT: This is apparently not caused by any JS on the site, because turning off JS and adding the link with the inspector produced the same behavior.
I had a similar error where clicking on any <a href="#"> causes a full page reload. I managed to solve this by removing the <base href="/"> tag from the <head> of the page. I couldn't find any informations on this (yet). I'll add more if I can find any additional info.
This problem happens when you use windows.onpopstate to handle back or forward buttons and load page using ajax. Try to solve your js code for handling history.
I tried to embed an edit page in a MediaWiki-powered site, but the problem is that a blank page is given.
Note: the same thing occurs when I try to embed a sign in page.
For example:
<iframe src="http://www.wikilogia.net/w/index.php?title=IT_for_Masses&action=edit">
</iframe>
I've been scratching my head with the same problem. Viewing pages worked fine but when I tried to do any editing or use login forms etc, I would just get a blank response. To fix it, just add the following lines to your LocalSettings.php:
$wgBreakFrames = false;
$wgEditPageFrameOptions = 'SAMEORIGIN';
For more, see the manual: https://www.mediawiki.org/wiki/Manual:$wgEditPageFrameOptions
Some sites prevent you from putting them in an iframe.
I have a site that displays other sites through an iframe on certain pages. It does this in order to display a toolbar that is relevant to the reader (like Facebook and Owly does). However, when the user chooses to leave the original site I want the bar to go away. As you might gather, I don't control the sites in the iframe, and they're on another domain than the iframing page.
I tried target="_parent" on the <iframe>, no luck. Then I tried various scripting solutions, but they all fail due to the same domain restriction. My last try was to have a timeout check for changes in the iframe URL, but iframe.contentWindow.location.href is restricted when page is on another domain (unlike the object iframe.contentWindow.location which I found a bit weird).
Any solutions to this problem? I know iframes aren't the hottest thing around, but they do the job in this case.
Try target=_top That should open the page in the full body of the window.
No solutions.
The only way to get a link to open in the top frame is to have access to the link itself. As you observed, the same origin policy prevents JS from outside the frame accessing it.