I got an assignment to build a website and I was wondering, how can I change a iframe on clicking a link without using javascript or giving the iframe a ID?
I'd rather do it with a ID aswell, but yeah, that's not allowed.
You can use an html link outside of the iframe, and set the target to the name of the iframe.
See the w3schools Example Here
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
If the link is inside the iframe, you simply need to set target=_self on the link.
W3Schools.com</p>
Related
I have this .html (https://techstart.ro/wp-content/uploads/2022/07/index-1.html) and i want to insert it on my WordPress Post but I don't want to be as a link. And to show directly on the posting page.
Is this any solution to do it?
You could simply use an iframe to do that.
You can use Wordpress editor's HTML block and add soemthing like this:
<iframe src="https://techstart.ro/wp-content/uploads/2022/07/index-1.html"></iframe>
and add your desired width, height and other options to tag directly:
<iframe src="https://techstart.ro/wp-content/uploads/2022/07/index-1.html" height="300" width="500"></iframe>
or with css.
The other option would be using any iframe plugin and then the corresponding shortcode. such as:
iframe or advanced iframe
you can read more on it here and here.
I'm trying to embed an "clickable" image (Html code with links and shapes in it) to a new style sharepoint site. As the new one doesn't feature the option to edit the source code I tried to embed it via an iframe and the embed webpart. I managed to get some html code in the iframe via the srcdoc attribute but it isn't showing my image. The image is on the Sharepoint and the link also correct.
The Code:
<iframe srcdoc="<img src=https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png" width="400" height="400" "="" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07"></iframe>
The scr attribute is for the Sharepoint, because without it it doesn't accept the code.
Is it just not possible or did I something wrong?
What is stopping you from using the Image Web part?
Cheers
Truez
I know it has almost been 2 years but just in-case you still need the solution here it is:
The Solution:
Your img syntax is incorrect, you do not have a closing ">". Here is the proper syntax:
<iframe srcdoc="
<img src='https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png' width='400' height='400'/>" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07" width="iframe width here" height="iframe height here"></iframe>
Don't forget to include an iframe height and width as SharePoint requires it. Also remember when embedding any html code that requires ", you need to change it to ' instead as it will break the code.
How can I force an IFrame to open links inside the parent?
The only way I could find here on StackOverflow and over the net is to use the target attribute inside the links themselves or inside the base tag.
The problem starts when the source of the IFrame is external. For example, if I want to embbed Google inside the IFrame, I cannot alter the code of Google, so I need a way to tell the IFrame itself to open links in the parent, without touching the code of the source.
Thanks.
I am using django cms to create my website and a google calendar. However, when I added the code, it comes up as just plain code and won't display the calendar.
here is the link to my site:
http://138.68.6.151:8000/en/events
Can someone explain how to fix this?
I did some more research and found that I had to add the following inside my settings.py
TEXT_ADDITIONAL_TAGS = ('iframe',)
TEXT_ADDITIONAL_ATTRIBUTES = ('scrolling', 'allowfullscreen', 'frameborder',
After going to your site and using browser's console to inspect your iframe, I found that the iframe tag is improper (like a text in quotes) and therefore its not rendering properly. In your paragraph tag, the iframe tag should be in following way:
<p><iframe frameborder="0" height="500" scrolling="no" src="https://calendar.google.com/calendar/embed?height=500&wkst=1&bgcolor=%23FFFFFF&src=6uemf0u3aqg89knqb4ndic0n04%40group.calendar.google.com&color=%23853104&ctz=America%2FChicago" style="border-width:0" width="500"></iframe></p>
To verify this, after playing at front-end level I got following results.
Previous state (also notice the HTML code on the right)
After making above mentioned changes in the code at frond-end (notice on the right that now the iframe tag is highlighted as a tag which was not the case previously):
So the iframe tag is not rendering properly in your case.
Since you are using iframe in Django CMS, recipe mentioned in this stackoverflow post will assist you.
I want to make a html page that act kind like google cache.
Say in my homepage HOME, I have a link A to a website B, and when I click on A, the page that comes out will display the content of another page, with a floating bar on top that has some functions of my own choices.
For example, I want my link to show google.com, but I also want to add a button(floating bar, anything) to that google.com that allows me to return to my own webpage when pressed.
Can someone provide me some useful resources for me too look at, or even better a solution template? :)
Thanks!
You could use an <iframe> in order to display an external webpage within your webpage.
Just place the url of the webpage that you want to display inside the quotes of the src attribute.
<iframe src="http://www.webpage.com" width="400" height="400"></iframe>
An iframe sounds like it may be what you need, but I'm not 100% sure after reading your description. The iframe will show content from another URL in your page. Once you have that all you need to do is style the page and use CSS/JavaScript to add in your functionality as described.
Check out this:
http://www.w3schools.com/tags/tag_iframe.asp
Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).
Here's the general idea:
HTML:
Click Here
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>
Some jQuery (not tested):
$(document).ready(function() {
$('#frame').hide();
$('#link').click(function () {
$('#frame').show();
})
})
Style it as necessary
Note - this answer in no way endorses w3schools.com :-) . Please see w3fools.com/
I found Kevin Gourney's answer to be most straight forward and helpful. I'm using this to work around Adobe Spark's Domain limitation and created a simple one liner index.html file and tweaked the code as follows:
<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>