jQuery操作iframe页面DOM

如图,左侧是一个表单,右侧是一个iframe嵌入的页面,要实现的效果是,左边表单选择不同的模板,右侧要展现不同的模板页面,当输入的标题,文案发送改变,右侧也要实时动态变化,提供预览的效果。

jquery_iframe

1.jQuery改变iframe引用页面

选择不同模板,iframe展现不同的模板页面,只需在模板选项发生改变事件时,改变iframe的src属性值为新的模板路径即可。

//获取模板并在预览框展示 function previewTemplate(template_id) { $.post(“/tipsadmin/ajaxGetTemplateName”, {template_id: template_id}, function (data) { template_name = data.name; preview_url = data.previewUrl; if (template_name) { $(“#preView”).attr(‘src’, preview_url + template_name + ‘/index.html’); } else { $(“#preView”).attr(‘src’, “); } }, ‘json’); }

2.jQuery操作iframe里的DOM

实现左侧表单文字改变,iframe模板页相应位置文字实时变化,需要jQuery操作iframe里的DOM元素。

如iframe页面标题的id为title,文案内容的id为content,改变iframe里的DOM的值,jQuery代码片段如下:

var $iframe = $(“#preView”); var $rule_title = $(“#rule_title”); var $rule_content = $(“#rule_content”);

//标题,内容文字变化预览效果 function contentChange() { $rule_title.change(function () { $iframe.contents().find(“#title”).html($(this).val()); });

$rule_content.change(function () {
    $iframe.contents().find("#content").html($(this).val());
});

}

这里主要是获取iframe的contents()属性,就可以操作iframe里的DOM了。