I have a page containing two separate iframes(header and navigation), which have some links inside. (I know it sucks. I have to do this, because the header and navigation are actually from another project)
When I click the links inside the iframes, only the relevant iframe changes. While what I want is that when I click the link, the whole page, namely the current window, changes to that new URL.
I know javascript injection is not possible and I can't append a <base target='_top'> into iframes' <head>.
Is there any way I can achieve what I want? Or if you have a better way other than <iframe>, please don't hesitate to tell me. I'm still a novice in Front-End engineering. Any help will be appreciated.
Add target="_top" to the links in the frames, e.g.
Click me
Same domain? Go to town and inject a tag, or modify all of the a tags to have a target. I can add more info on how to do it if needed.
Edit
Here's a jsbin page for completeness:
http://jsbin.com/osoji4/10
Related
I have been searching for this for days and was wondering if anyone could help me with the answer to this.
So, I am currently building a system which allows users to create html pages which can include css and js links and possibly inline scripts/styles within it.
I want the user to preview their output, i was originally using a div tag and adding the html output to it but as all the extra styles and scripts also affected the parent page, i decided the only option was probably to use an iframe to put the content in.
To stop bootstrap links and Jquery conflicts to the parent element, i need to run the iframe in a sandbox environment from what i know but i have no idea how to set the content of the iframe when its in sandbox mode.
If you try:-
$("example iframe element").contents().find("body").html("example html inline styles etc");
this does not work and blocks access due to the iframe being sandboxed and not allowing the origin.
Sandboxing an iframe seems to be the only way to stop multiple instances of Jquery "one on the parent and one in the iframe" from conflicting, i did try noConflict which seems to work but that does not fix conflicting multiple bootstraps being loaded in the parent and iframe elements.
does anyone know either how to add content at runtime to a iframe that is sandboxed without getting blocked access or a different unique container approach i can use?
i appreciate any help or guidance anyone could give on this as i cannot really find much information about it.
I have finally found out what the problem is with this situation, i do not need a sandboxed iframe as i now know why Jquery and Bootstrap are conflicting without having to sandbox the iframe. I see lots of posts telling you to use something like the code below to put content in an iframe.
$("example iframe element").contents().find("body").html("example html inline styles etc");
the problem with the method above is that its opening the iframe up for putting content inside it but its not specifying the closing of the iframe.
This is why even on a normal none sandboxed iframe Jquery and Bootstrap conflict because its leaking back into your parent page by not being closed. The real method for putting content into an iframe directly should be the code below as it ensures the connection is closed off appropriately.
var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();
by doing the above code you are not only modifying the content inside the iframe but your also closing it off once you have finished writing the content. This is very important in ensuring Iframes stick to their purpose as being a completely isolated page element and it stops js and css leaks into your parent page.
i hope this answer helps save time for anyone else who comes across this particular problem with iframes and is adding content at run time using the wrong method.
The landing page of reliefweb has a 'latest disasters' section that I want to embed onto my website (see screenshot).
I was told that I need to use an iframe and some JavaScript to get the element with class=“latest-disasters”.
This way, when the block is updated, it will also reflect on my website.
As I have no background in JavaScript, can someone show me how to do this?
Thank you for helping.
You haven't provided enough information.
But this is usually how it's done with iframe
<iframe src="http://www.latest-disasters-api.com" class = "latest-disasters"></iframe>
About the javascript part i don't have enough information but obviously you need some kind of SDK or JavaScript plugin
Hope it will help
Okay, In HTML, preferably 5, is there a way to set a link to take the user to a specific place on an external? I know I can link to an anchor
<a href="#blahblah"> goes to <a name="blahblah">
but what i need to to act as if my anchor is on someone else's page, where I cannot insert an anchor. Help me out?
Yes. Just use the hash after your root URL, like so:
or
However, if there is no anchor on the other page or you aren't in control of that page, then I'm afraid there is not a way to do that.
I'm sorry if this wasn't the right place to ask. I'm having trouble figuring this one out.
What I'm trying to do is removing the demo bar provided by marketplaces like themeforest or mojothemes within my own demo site.
But since what appears in the marketplace's live demo of a theme is fetched, it appears within an iframe inside of their site.
I've tried asking in their forums but no one has been helpful.
Is there any way to do about this? An example done in a marketplace would be great.
The Answer is No. It is not possible to modify dome elements outside iframe by a script on site in iframe.
Reason: Since The Marketplace website is Accessing your Demo Site within iFrame at thier server.
Like how you embed a YouTube Video on your Page and Specify a Heading above it etc, does youtube or google map ever try to change their container styles? do they ever change the heading you wrote above the embed code?
Thats it
You cannot (due to the Cross Site Scripting - http://en.wikipedia.org/wiki/Cross-site_scripting) as it is a separated document. But what You can do is to use Web Messenging: http://en.wikipedia.org/wiki/Web_Messaging to affect JS/CSS within the iframe (but this will require actions on both sides).
If you can execute Javascript from within an iframe you can change the elements outside of it with the Window parent Property. Example usage:
parent.document.body.style.backgroundColor = "red";
changes the background of the <body> outside of the iframe.
I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.