Assitance getting elements from an iFrame using jQuery or javascript - javascript

I am clearly being stupid. Please see below and tell me where I am losing it :-(
Html layout
<div class="the-variables">
<span class="asking">156.25</span>
<span class="bidding">144.82</span>
</div>
iFrame Layout
<iframe id="livetick" style="overflow-y: hidden;" src="http://dev.aatsol.co.za/live-feed/" scrolling="no" seamless onload="window.parent.scroll(0,0);" height="370" width="370" frameborder="0">
<p>Your browser does not support iframes</p>
</iframe>
And this is my javascript attempt
jQuery( document ).ready(function($) {
var iframe = document.getElementById('livetick');
/* var innerDoc = iframe.contentDocument || iframe.contentWindow.document; */
var innerDoc = iframe.contentWindow.document.getElementsByClassName('asking');
//alert (innerDoc.innerHTML);
//alert (innerDoc);
console.log(innerDoc);
});
For some strange reasons I fail to pull the two values from within the provided spans. They are handled on a remote website fluctuate based on various factors. I simply want to pull them on my website in a iFrame and copy the two values fro inside the iFrame to a section on my website footer.
In short:
1. Get values inside iFrame
2. Copy exact values to a section on my website footer (using jQuery / javascript)

Based on the URL of your iframe, you're running into the Same Origin Policy, which prevents cross-origin access to the document. You can't access the DOM of a window that isn't from the same origin as the document you're trying to access it from.

Related

Iframe cross-origin issue when using srcdoc

I need to display an input from user that is html, I don't want user to be able to use script here so i'm using the sandbox mode of iframe to have content without script.
<iframe class="frame"
srcdoc="<h1>title</h1><p>content1</p><p>content2</p>"
sandbox=""
style="width:100%;border:none;overflow:hidden;">
</iframe>
The problem is that I would like to be able to resize this frame to match the height of it's content with the bellow function but I can't access to iFrame.contentWindow.document due to cross-origin.
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
Is there a way to solve this ?
Finally I solved the issue. The problem was coming from the sandbox mode that is restricting everything so I needed to allow the javascript from same origin to be able to access it from my page :
<iframe class="frame"
srcdoc="<h1>title</h1><p>content1</p><p>content2</p>"
sandbox="allow-same-origin"
style="width:100%;border:none;overflow:hidden;">
</iframe>

Accessing iframe.contentWindow.document not working using postMessage()

My goal is to add css to the iframe content from the parent page. I have two different domains one rendering an iframe from the other, I'm using postMessage to bypass the same-origin policy issue however this doesn't seem to work as expected. When I try to console.log(iframe.contentWindow) I get an error in the console Uncaught DOMException: Blocked a frame with origin "http://parent.domain.com" from accessing a cross-origin frame.
iframe
<iframe
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src="https://domain.with.iframe.content"
width="100%"
frameBorder="0"
id="iframe-1"
></iframe>
Page with iframe.
<script>
window.addEventListener('message', function(e) {
var iframe = document.getElementById("iframe-1");
console.log(e)
console.log(e.origin)
console.log(iframe)
console.log(iframe.contentWindow)
}, false);
</script>
Page that I'm iframing.
<script>
var body = document.body
body.onload = function resize() {
parent.postMessage(["hey"], "*");
}
</script>
</script>
From the console I can see that the message event listener is running, however this line console.log(iframe.contentWindow) throws the error. Any help will be much appreciated, thank you.
Adding an answer from my comments:
You can't access iframe.contentWindow from the parent frame, see SecurityError: Blocked a frame with origin from accessing a cross-origin frame
So you'll need to pass the CSS you need back and forth with postMessage.
Depending on how you get the CSS but assuming you have it as a string, you could send that string to the iframe using postMessage. Inside the iframe you could create a style tag, set the innerHTML of that tag to the CSS string and append it to the document head. Like in this article under Global Styles https://dev.to/karataev/set-css-styles-with-javascript-3nl5

Handle the canvas element inside the iframe such as moving and scrolling automatically using javascript?

I tried to handle the canvas inside the iframe but I could not handle it.
It is rendered by webgl and I want to move and scroll automatically.
In order to do it, I tried to catch the mouse click event firstly.
But it is not working.
Especially, I could not change the contents of the iframe because it is received dynamically.
Is it possible?
If it could be possible, please share the solution.
This is my challenge.
let iframe = document.getElementById("childFrame");
let childDocument = iframe.contentWindow.document;
let canvas = childDocument.getElementById("map-canvas");
canvas.addEventListener('click', function (e) {
console.log('#### DEBUG EVENT: ', e);
});
But it does not work.
If your iframe is from another domain you're out of luck. By design the main page can not directly manipulate iframes from a different domain as that would be a huge security issue. For example a page could open in iframe to amazon.com, click "add to cart" and click "buy". Or it could monitor the forms in the iframe watching for the user's username and password as they logged in to their bank. That is why if the child and parent pages are not on the same domain you can not access the child from the parent (nor vice-versa)
So first you need to answer the question: Is your iframe contents from the same domain?
If your iframe is from the same domain then you need to wait for the iframe to load before trying to access its content.
<!-- main.html -->
<body>
<iframe id="childFrame"></iframe>
</body>
<script>
const iframe = document.getElementById("childFrame");
iframe.onload = run;
iframe.src="child.html";
function run() {
const childDocument = iframe.contentWindow.document;
const canvas = childDocument.getElementById("map-canvas");
canvas.addEventListener('click', function (e) {
console.log('#### DEBUG EVENT: ', e);
});
}
</script>
<!-- child.html -->
<p>
click in side rect
</p>
<canvas id="map-canvas" width="200" height="50" style="border: 1px solid black"></canvas>
example
If your iframe is from a different domain then the only solution I know if is if the creator of the content of that iframe offers an API to manipulate the contents of the iframe. For example Google maps offers an API to manipulate maps. If the page you're trying to display does not offer an API or they do but it doesn't do what you need then there is no solution.

Load website in first Iframe and its front end code in second Iframe

Just for the sake of learning Im asking this question.
I'm using 2 iframes
lets suppose I load a random website in Iframe1 Is it possible that its front end code is displayed in the 2nd Iframe dynamically/automatically.
Im talking about the code you see once you press CTRL+U on any webpage.
Please help
Loading any sites to iFrame
You can do it but not for all sites, cause some sites like google and stackoverflow blocks their loading to frames.
Getting any site content
You can`t do it, you can do it only if you iframe domain are the same as your site domain (Here is the description of policy same origin policy).
But
You can do some hacks, here is
solutions
Also here is fiddle that illustrate same origin policy exception. Use console to see it.
fiddle
Fiddle code
<iframe name="site_frame" id="site_frame" src="http://iherb.com">
</iframe>
<iframe id="code_frame">
<textarea id="code"></textarea>
</iframe>
document.getElementById('site_frame').onload = function () {
console.log("Frame loaded!");
var siteFrameDoc = getIFrameDocument(document.getElementById('site_frame')),
siteFrameHtml = siteFrameDoc.getElementByTagName('html');
wrapper = document.createElement('div');
wrapper.appendChild(siteFrameHtml.cloneNode(true));
var codeFrameDoc = getIFrameDocument(document.getElementById('code_frame'));
var textarea = codeFrameDoc.getElementById("code");
console.log(textarea);
textarea.value = wrapper.innerHtml;
};
function getIFrameDocument(iframe) {
return iframe.contentDocument || iframe.contentWindow.document;
}

JavaScript - trouble accessing DOM of dynamically generated local iframe

I'm having trouble accessing the DOM of an iframe content document if I create the iframe dynamically in JavaScript rather than hard-coding it in the HTML.
I'm finding this so far testing in Mac FF26 and Safari 6. It is a local iframe document on the desktop, so there should be no cross-domain issues.
The iframe I generate appears normally in the browser window. But trying to access it with contentDocument, the body element seems to be empty.
Is this a known issue? Perhaps I'm generating my iframe in an unusual way:
var newIframe = document.createElement("iframe");
newIframe.id = "generatedIframe";
newIframe.src = "test.html";
document.body.appendChild(newIframe);
var iframeTag = document.getElementById("generatedIframe");
// the iframe will be appearing normally in the browser now
// but this fails -- innerHTML is empty string:
var iframeContent = iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML;
// same reference code works if the iframe is hard-coded in HTML instead
In fact your problem is not the way you generated your iframe.
The iframe DOM is only available after it has been loaded.
The code behind illustrates what I mean :
In your parent window container :
<script>
function doSomething() { alert(iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML()); }
</script>
In your iframe document
<body onload="window.parent.doSomething();"></body>

Categories