I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?
Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.
Related
I need to develop a widget for embedding my contents on 3rd party HTMLs.
I searched several pages about this topic, and understood pros/cons of using iframe and javascript but still remain one question.
I mean:
using iframe is giving 3rd party users a iframe tag, e.g. <iframe src="https://sample.com/widget.html</iframe>
using javascript is giving 3rd party users a script tag, e.g. <script src="https://sample.com/widget.js</script>
A page explains about using Js, but their Js code just generates iframe and insert it into parent's node and set contents to iframe.
e.g.
var iframe = document.createElement('iframe');
iframe.src = 'https://sample.com/widget.html
// insert iframe into parent node
// or set content into document
var doc = iframe.contentWindow.document;
doc.open();
doc.write('content');
doc.close();
My question is how differences between just using iframe and using iframe that Js generated and inserted?
My understanding is that iframe via Js is better if I want to change iframe's behavior/appearance.
But these are almost same behavior if Js code just inserting iframe.
Is it correct?
have you explore Zoid? It is a boilerplate to help you design an embeddable widget script with security as its main feature. Check this article
Inserting the iframe directly as embed code is similar to inserting the js code to load and render iframe. There is no difference. But there are differences when we use our embed as iframe tag as compared to when we use script tag.
I have a program (called 'PersonalBrain') that exports to html using very complicated javascript (based on Prototype). The script places an iframe inside a div in a main html file. The result is that a searchengine cannot index the content of the iframe. Changing the script is not an option. My idea is now to somehow get the content of the iframe and place this inside another div in the main html - in such a way that this is indexable (and then hide it with css). How would I do that? It needs to be in plain javascript (or maybe php?).
BTW: the id of the iframe is also placed dynamically.
A live example can be found on https://www.wideopenwindows.be
I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.