In my application, I am using iframe to display content dynamically within a page, from another domain.
The iframe src can also return a script sometimes. Issue is, in that script sometimes I am having the following part of code:
window.top.document.getElementsByTagName('body')[0].appendChild(data_to_be_appended);
As a result, some of the images are being appended to the parent body tag and overlayed on the actual output and disturbing the application view. I am having a couple of iframes displaying within the same page and having issue with displaying of application view due to this overlay.
Can anyone please let me know that, how I can overcome this overlay issue and display the src related content only within the iframe strictly.
Related
So I'm pretty new to html/javascript but i'm working on a project where i'm loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content">
<object type="text/html" data="./ProjectsHTML/radio_project.html">
#document
</object>
</div>
and inside the '#document' is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it's usefull for the solution, I'm using Electron.
Please help :)
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.
For one of my Chrome extension project, I fetched the HTML content of another webpage in an <iframe> tag of the current webpage, by populating its src attribute dynamically. Now, I want to scrape a few values from inside the <iframe> tag. But the jQuery always shows this <iframe> tag as empty. The reason I am using is that there are a few JavaScript files inside the fetched page that I want to get executed before I start scraping. I also tried to set wait timers, but jQuery always shows <iframe> tag to be empty (though the src attribute is set).
Upon investigation, I found that the <iframe> has a strange #document value inside it, followed by the normal HTML tags. I wonder if this is the reason why the jQuery is unable to recurse through a DOM hierarchy inside the <iframe> tag.
See below screenshot of the "inspect" view of the desired <iframe> tag.
Also, the main webpage on which the <iframe> tag exists is on the same website as the newly fetch page url (albeit a different subdomain). And I'm not getting any access permission warnings in Chrome, so I do not suspect this to be a cross-domain issue.
Edit:
Even after 10 seconds wait:
console.log($("#insertHere").text());
returns empty. And,
console.log($("#insertHere").parent().html());
returns: <iframe id="insertHere" src="/courses/intro..." style="width:0;height:0;border:0; border:none;"></iframe>
You can grab iframe content with such code :
$('#insertHere').contents().find("html").html();
$('#insertHere').contents().find("#MathJax_Message").text();
If the iframe is on another domain (seems to not be in your case), cross-site-scripting (XSS) protection of your browser will block it.
The #document is a page document object for the iFrame DOM.
Try accessing the document of the iframe, e.g.
var frame = document.getElementById('#hidden-frame');
console.log(frame.document.body);
You could also try using a Content Script and allowing it in all pages with <all_urls>, which should be loaded with the iframe content, and use it to send the content to background script using messaging.
For utilising content script advantages, I tried writing html code inside my chrome extension and tried injecting it into a created iframe using content script. It actually works, however it seems blurry (I have tried --webkit-font-smoothing: antialiased - and also if I go to the direct URL of the html page inside the extension (http://chrome-extension://ext_id/views/my_html.html), it doesn't get blurred on the actual html).
var elt = document.createElement('iframe');
elt.id = 'my_iframe';
elt.src = chrome.extension.getURL('views/my_iframe.html')
elt.setAttribute('scrolling', 'no');
document.getElementsByTagName('body')[0].appendChild(elt);
This is the approach I used. And again, if I go to http://chrome-extension://ext_id/views/my_html.html it doesn't get blurry (please check image at the bottom).
So I started investigating what may be causing the issue.
First, I tried to inject live websites into the iframe through src attribute, and they don't get blurry:
elt.src = "https://example.com"
However, here, one thing I realised for iframe is that all the other URLs that I fetch seem like this in the Inspect Element.
The iframe element is openable and it has #document as child which has all the html content as grandchildren
However, my one looks like this on the DOM that it doesn't open and I don't have #document tag either.
Second thing I tried was getting the content of the html page using
$.get(chrome.extension.getURL('views/my_html.html'), function(data, status){
// and inject data inside the iframe, however that
// caused path errors of separated files such as css and js..
});
.. because in my html file, I included files as
<link href="/styles/my_css.css" rel="stylesheet" type="text/css">
<script src="/libs/jquery-3.2.1.min.js"></script>
Thirdly, I tried zooming on the page to see what's happening. When I zoom, it gets blurry and very interestingly, if I open Inspect Element, it gets zoomed it also which doesn't on any iframe or any other website. It seems like I have injected a JPEG image in the iframe; and even inspect element gets blurry inside the iframe
If I inject any website into my iframe, even if I zoom in 1) Inspect Element doesn't get magnified, 2) Even if I zoom, it doesn't get pixelated or blurry simply because it's code; however in my case, it's acting like an image.
It's driving me insane how and why this is happening. Do you have any ideas thoughts what may be causing it or how to overcome this issue?
For recreating the issue, you can follow this method
Also, I have created a simplified extension for replicating the issue: https://drive.google.com/open?id=1y0Dopp1GhU47tWhXgxoGUy3DaDsQDouc
Even an almost empty project, it's blurry:
However it doesn't on webpage URL to the same html
I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.