i am using feeds module for import news items.By using views,i display the news title,description and item url.In this,when user hit the item urls means its loads that particular site inside my site.I try to use Iframe by way of "output rewrite option" in views.But that page load fully instead of load inside my site.I use following code for that.
<iframe src="[url]" width="100%" height="300">
<p>[url]</p>
</iframe>
Any one please guide me resolve this.
thanks
This can be achieved using the target attribute on an a tag. For example when the user hit's the item URL it would load in the target window which in this case is the frame. Take for example the code below.
test
<iframe name="target_frame" src="http://www.google.com" frameborder="0" width="300" height="300"></iframe>
The frame initially loads google.com but once the link is clicked the target attribute on the a directs the click to the frame which has the same name attribute, in this case target_frame
You can read more about the target attribute here http://www.w3schools.com/tags/att_a_target.asp
Related
In my angular application, i load URLs inside an iframe dynamically, i want to apply custom.css to the loaded url once the url is loaded inside an iframe.
I have tried it using ng-init with angular-css-injector function in iframe. It works, but the css is not applied. Probably it is getting called in the initial stage. Is there any angular feature to apply the function once the url is loaded in iframe?
Here is the code
HTML:
<iframe frameborder='0' ng-src="{{trustSrc(selected.imgurl)}}" ng-init="applyCSS()" frameborder="0" allowfullscreen>
</iframe>
App.js:
var routerApp =angular.module('DiginRt', ['ngMaterial','angular.css.injector'])
routerApp.controller('AppCtrl', ['$scope', '$mdSidenav','$sce', 'muppetService', '$timeout','$log', 'cssInjector',function($scope, $mdSidenav,$sce, muppetService, $timeout, $log,cssInjector) {
$scope.applyCSS = function() {
cssInjector.add("style.css");
console.log("loaded css dynamically");
}
Here is the plunker
The thing which you are trying is appending CSS to own page, and appending css do parent document would not be applied to the child document which is created by iframe (Iframe creates child document after src has been loaded into the DOM).
Simply you can not do this. You can dynamically add the style dynamically inside iFrame unless the domain of both be same.(Refer this SO Answers for add url for same domain)
By looking at your code it don't looks like your are trying to load different domain inside iframe on your domain.
Possible work around would be, you could pass one more query parameter inside url & maintain css code on the site which you want to load it inside your iframe on basis of query parameter.(use yepnope.js to load js conditionally)
What are the possible ways in which I can preserve an iframe embedded in a view in between my route changes?
As the route changes from Route A-> Route B, Ember destroys the View for A. My View for A has an embedded iframe which I would love to preserve and not reload when Route A is revisited.
So far, I tried moving my iframe to a parent view that is not destroyed when exiting Route A but browsers reload iframes when you move them around in the DOM, so its a moot exercise.
Indeed nesting is the right choice for you problem of iframe.
Here is a detailled example with a counter to see when the iframe is reloaded.
|-home
|-about
|-elsewhere
This important part of the fiddle is :
<div class="border-row">
This is home
<iframe src="http://emberjs.com/" width="100%" height="150px" onload="App.HomeController.countLoadings()"></iframe>
count : {{App.HomeController.loadcount}}<br/>
isDestroying : {{isDestroying}}<br/>
isDestroyed : {{isDestroyed}}
</div>
{{outlet}}
You can see that the iframe only reloads when you actually move to another part of the hierarchy route. If you navigate between home and about, the iframe stays the same.
I have used Sitecore field renderer for one of my page to be edited in the Sitecore page editor. That page includes an image which needs to be reference from Sitecore media library.
So I insert the image control into the markup of the Sitecore field renderer as follows
<img id="imgBusinessAdFeatues" class="classifiedImageSamples" src="~/media/Images/What is a Business Account/businessAdFeatures.ashx" alt="Business Ad with Features" />
“~/media/Images/What is a Business Account/businessAdFeatures.ashx” is the path to the image that stored in Sitecore media folder.
Now the image is rendered properly inside the page, but when I tried to edit that image (upload a new image) using Sitecore page editor it’s not allow me.
Is there any way to make the image editable (Upload a new image) when I open that page in Sitecore page editor?
Thanks
Thank you for the ideas.
But my problem is little bit different. I have Sitecore field renderer in in my sample page.
<sc:FieldRenderer ID="frTestPage" runat="server" />
From the code behind on that page, I bind a Sitecore item as follows.
frTestPage.Item = DatabaseManager.MasterDatabase.GetItem(“itemID1”);
frTestPage.FieldName = "Content";
In the item that I’m binding to the field renderer, it has richtextbox field name “Content”.
Within that “Content” field I have inserted my markup to be render to the page. So that markup consist of following img tag and other relevant HTML.
<img id="imgBusinessAdFeatues" class="classifiedImageSamples" src="~/media/Images/What is a Business Account/businessAdFeatures.ashx" alt="Business Ad with Features" />
So how can I give the image src path correctly which reference to an image in Sitecore media library.
It's wrong to use hardcoded path for images:
You can see all parameters here.
If you use XSLT to render your images, you can apply the parameters on the sc:image directly:
<sc:image field="MyImage" width="150" height="100" bc="ffffff"/>
If you use UserControls (.ascx) to render your images, you can register the following tagprefix to access sc:Image and sc:FieldRenderer:
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
You can use Edit(Page Editor), then More -> Insert Image, see:
Also, to have a more edit options you can use "Edit e related Item"
I am saving Visualizations in a database, title, description...etc and CODE field, in the Code field I save the "code" that will generate the visualization, it may be as simple as a URL for an image hosted somewhere, or something like:
<script src="https://spreadsheets.google.com/gpub?url=http%3A%2F%2Foj0ijfii34kccq3ioto7mdspc7r2s7o9-ss-opensocial.googleusercontent.com%2Fgadgets%2Fifr%3Fup_title%3DBrands%26up_initialstate%26up__table_query_url%3Dhttps%253A%252F%252Fspreadsheets.google.com%252Fspreadsheet%252Ftq%253Frange%253DA%25253AE%2526key%253D0AqFjLMbUaBn_dFhwbV9DQ3N6cWN1SmFiUlF5X1RXUkE%2526gid%253D0%2526pub%253D1%26url%3Dhttp%253A%252F%252Fwww.google.com%252Fig%252Fmodules%252Fmotionchart.xml%26spreadsheets%3Dspreadsheets&height=448&width=710"></script>
I am saving this as an nvarchar(max) in my database, now I have a page that should display the visualization I call on run time, so what is the best way to do so?! a div for example? and how?
Thanks in dvance
ok, here you go Maen ...
1) Declare your IFrame (you can set more properties like height & width):
<IFRAME id="frame1" scrolling="auto" runat="server">
</IFRAME>
2) Get the URL from your "Script" stored in your Database
frame1.Attributes["src"] = DAL.GetURLPath();
does this help?
have a page with many links.
when any link is clicked, the page corresponding to that hyperlink should open within a specified area on the same page, that is the "div content"
yes i can use iframe
but can i make a div target of the hyperlink?
please no jscript only html and asp.net
You can use anchors and use it to target your iframe
Google
<iframe name="thisframe" src="http://www.yahoo.com"></iframe>
As far as i know, you can never target *div*s unless you use javascript to manipulate the DOM, though. But if you really REALLY had to use the HyperLink control instead, the you can use the following code instead of using the anchor:
<asp:HyperLink ID="uxHyperLink" runat="server" Target="thisframe" NavigateUrl="http://www.google.com">Google</asp:HyperLink>
<iframe name="thisframe" />
you can use html bookmarks. For an example click on this link
http://www.matlus.com/quartz-for-aspnet/#videos
If will not only take you to a page but scroll your browser down to the "videos" section onthe page.
In the url (the link) notice the /#videos. That is the bookmark. On the target page in question I have an anchor tag with it's name attribute set to "videos"
[a name="videos"][/a]
I'm using square brackets above because of the editor not allowing anchor tags. So basically, just above your "target" div, place an anchor tag and set the "name" attribute. Then you your link simply append the /#anchorname at the end of the url.