In the iframe source code page i see just this code how can import all source original webpage css and js
<iframe src="https://morocco.blsspainvisa.com/book_appointment.php"height="1500" width="1550"></iframe>
How to import website completely source with iFrame
Just put the src field on the browser bar, and you will be viewing the real website, not an iframe mirror
Related
What I am attempting to achieve:
I have a page that has some header information followed by a document via embedded PDF and finally some footer information. Ideally, this would be displayed as one continuous document that could be printed as such.
What I have found:
I load the PDF into an iframe on the page. Because this document is not public it is requested via server-side action that checks permissions and returns the document as Content-Type: application/pdf;
This works to load the PDF but I am unable to turn off toolbars and other embedded PDF viewer controls (minor issue)
When I attempt to read the iframe document height using javascript in the containing page to modify the iframe height and thus remove the scrollbars I get a cross-domain origin issue despite the PDF loading from the same domain, server, etc.
Any help or pointers much appreciated.
There is a standalone viewer which you can use show pdfs:
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
This don't provide you with
toolbars and other embedded PDF viewer controls
EDIT : If you don't want to use the above option then you can also use PDF.js an open project to render pdf in html.
<iframe id="pdf-js-viewer" src="/web/viewer.html?file=%2Fmy-pdf-file.pdf" title="webviewer" frameborder="0" width="500" height="600"></iframe>
I have been trying to figure out how to display code submitted by a user (html, css, javascript) on my Django website. I can get a single page application to show up in an iframe just fine, such as one html file with css and javascript files linked.
The problem arises when the user has multiple html pages and wants to link between them. I haven't figured out how to allow multiple user-submitted html pages within an iframe. Is it possible to link to another html page with an iframe? Can I set up a localhost environment on my Django application to run the user's website (similar to what CodeAcademy does)?
I have tried writing the user's code to an iframe, which works fine for one html document.
let html = "<html><body>My HTML</body></html>";
let doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(html);
doc.close();
I am trying to write multiple html pages to an iframe or set up a localhost environment to allow navigation between pages (index.html, about.html, profile.html, etc)
How can I get this to work?
I assume you have several sets of HTML strings (for each page).
var pages = {
home: "<html><body>My Home page. <a href='parent.loadPage(\'about\')'>about me</a></body></html>",
about: "<html><body>My About page. <a href='parent.loadPage(\'Home\')'>Home</a></body></html>"
};
Then you'd have a function that loads the code into your iframe
function loadPage(page){
let doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(pages[page]);
doc.close();
}
Then you'd call the function to load the home page...
loadPage(page);
... and set any links to call that function as well.
<a href='parent.loadPage("about")'>
I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.
How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.
I am creating my portfolio using a Bootstrap template (Freelancer). I have an iFrame embed that displays an e-catalog (located in a pop-up lightbox). For some reason when opening my website on a smartphone device, the page redirects automatically to the fullscreen version of the iFrame website without any prompting or touching. I've tried the 'sandbox' tag and it does not seem to work, but perhaps I am using it wrong. To clarify, the site/iFrame embed loads fine on desktop, but on mobile it redirects the homepage.
This is the iFrame code:
<iframe src="http://www.zoomcatalog.com/catalogs/kts-spring-2014/" width="100%" height="630px" frameborder="0" scrolling="no"></iframe>
The website is http://www.danieltomasku.net
Do I need to add some JavaScript to prevent the window from opening automatically? If so, how do I implement this? Should 'sandboxing' have worked? Should I put a div around the iFrame?
Any help would be appreciated. Let me know if you need more info/code. Thank you.
The site you are opening contains the following:
var iRegex = /android|(iP(hone|ad))/i;
if(iRegex.test(navigator.userAgent)){
var url= "<...>" + window.location.hash;
if(true) top.location=url; else window.location=url;
}
This JS redirects the parent page (your page [top window]) to another URL if the useragent matches android/iphone/ipad.
Just make it a linked static image. Otherwise you'd need to write a script to detect the location change attempt and override it. Besides, the iframe is messing with the framed page's analytics, counting each page view on your site as a view for the framed page.
Love the site by the way.
I'm trying to implement this in Confluence pages.
Basically, I have a PDF file (exported from Powerpoint), which has hyperlinks embedded, so when you click on the links in the PDF it opens whatever page the link is.
This PDF file is opened within an iframe in the Confluence page (which is created using a custom user macro).
Unfortunately, on Firefox and IE, the PDF links open the new page within the iframe, rather than the parent window. Chrome's inbuilt PDF viewer works fine (opening in the parent window).
Also unfortunate is that I don't know much about javascript or HTML. The code we are using currently for the 'create iframe' custom macro in Confluence is as follows:
## #param Url:title=URL|type=string|required=true|desc=URL for the iFrame
<script type="text/javascript">
jQuery(function($) {
var ratio = Math.sqrt(2);
var target = $("#f");
function fixRatio() {
target.width("100%");
if (target.width() > 1000) {
target.width(1000);
}
target.height(Math.ceil(target.width() / ratio));
}
$(window).bind("resize", fixRatio);
fixRatio();
});
</script>
<iframe id="f" src="$paramUrl" width="100%" style="border:0">x</iframe>
Now, most of this is just to do with sizing the iframe approximately to the PDF file (for aesthetic reasons).
Basically what I want to know is how do I get any links from the PDF opening not in the iframe but in the parent window?
I thought about performing an operation on the iframe window unload, something like
window.onunload=function()
within the javascript, or
<body onunload="somecode">
in the HTML, but I'm not sure where to place it or what the code is that I would need to force the new page to be passed to the parent window and rendered there instead of the iframe.
I've tried
<base target="_parent" />
but because the PDF viewer is separate from the rest of the page in the iframe it doesn't seem to work.
Sorry I'm very new to this, we did get a someone to help us but he wrote the code then didn't stick around to help with any issues, and I've only seen my first HTML and javascript today! So trying to learn fast...
Thanks!